Vue 3与Pinia：下一代状态管理的探索

引言

随着Vue 3的推出，Pinia应运而生，成为官方推荐的状态管理库，旨在替代Vuex。Pinia与Vuex相比，带来了以下主要区别和优势：

• 更简洁的API：Pinia的API设计更加直观和简洁，易于理解和使用。
• 更好的TypeScript支持：Pinia从一开始就考虑了TypeScript的集成，使得类型安全的代码编写更加方便。
• 模块化：Pinia支持模块化store，使得状态管理更加灵活和可扩展。
• 无需映射辅助函数：Pinia不需要像Vuex那样使用map辅助函数，简化了组件中的状态访问。

说人话，升级版的vuex

Pinia简介

Pinia 是一个为 Vue.js 设计的状态管理库，它在 Vue 3 中得到了官方的支持。Pinia 的设计目标是提供一个简单、轻量级且可扩展的状态管理解决方案，它旨在替代 Vuex 4，后者是 Vue 2 的官方状态管理库。Pinia 的设计哲学是尽可能地简化状态管理，同时保持足够的灵活性以适应各种规模的应用。

Pinia的诞生背景和目标

随着 Vue 3 的推出，其引入了 Composition API，这为状态管理提供了新的可能性。Pinia 的诞生正是为了充分利用 Composition API 的优势，提供一个更加现代化和简洁的状态管理库。

Pinia与Vuex 4的主要区别

Pinia 与 Vuex 4 相比，引入了许多改进和新特性：

• API 设计：Pinia 的 API 设计更加简洁，去除了 Vuex 4 中的一些复杂概念，如 mutations。
• TypeScript 支持：Pinia 从一开始就考虑了 TypeScript 的集成，提供了更好的类型支持。
• 模块化：Pinia 支持模块化 store，每个模块可以有自己的 state、getters、actions 和 mutations。
• 无需映射辅助函数：在 Pinia 中，你不需要使用 mapState、mapGetters 等辅助函数，可以直接在组件中使用 store。

Pinia的核心概念（store、state、getters、actions）

Pinia 的核心概念与 Vuex 类似，但进行了简化和改进：

• Store：Pinia 的 store 是状态管理的基本单位，每个应用可以有多个 store。一个 store 包含了应用状态（state）、计算属性（getters）、以及修改状态的方法（actions）。
• State：State 是应用的当前状态，它是一个响应式的 JavaScript 对象。在 Pinia 中，state 可以是任何类型的数据。
• Getters：Getters 类似于 Vue 的计算属性，它们是基于 state 的派生状态。Getters 可以用来返回经过计算或转换的 state，或者用来实现一些通用的逻辑。
• Actions：Actions 是用来修改 state 的方法。在 Pinia 中，actions 可以是同步的，也可以是异步的。与 Vuex 不同，Pinia 不再区分 actions 和 mutations，所有的状态修改方法都称为 actions。

安装和设置Pinia

如何在Vue 3项目中安装Pinia

1.安装Pinia：
使用npm或yarn来安装Pinia库。在项目根目录下打开终端，执行以下命令之一：

npm install pinia

或者

yarn add pinia

2.创建Pinia实例：
在你的主文件（通常是main.js或main.ts）中，引入并创建Pinia实例：

import { createApp } from 'vue'
import { createPinia } from 'pinia'
import App from './App.vue'

const app = createApp(App)
const pinia = createPinia()

app.use(pinia)
app.mount('#app')

创建第一个Pinia store的步骤

1.创建Store文件：
在项目中创建一个新的文件夹，例如stores，并在其中创建一个新的文件，例如counterStore.js。

2.定义Store：
在counterStore.js文件中，使用defineStore函数定义你的store

import { defineStore } from 'pinia'

export const useCounterStore = defineStore('counter', {
  state: () => {
    return { count: 0 }
  },
  actions: {
    increment() {
      this.count++
    },
    decrement() {
      this.count--
    }
  }
})

在Vue组件中使用Pinia store

1.引入Store：
在需要使用store的组件中，引入你刚才创建的store：

import { useCounterStore } from '@/stores/counterStore'

2.使用Store：
在组件的setup函数中，使用useCounterStore来获取store实例，并访问其状态和方法：

import { useCounterStore } from '@/stores/counterStore'
import { ref } from 'vue'

export default {
  setup() {
    const counterStore = useCounterStore()
    const count = ref(counterStore.count)

    function increment() {
      counterStore.increment()
    }

    function decrement() {
      counterStore.decrement()
    }

    return { count, increment, decrement }
  }
}

3.模板中使用：
在组件的模板部分，你可以直接使用count变量和increment、decrement方法：

<template>
  <div>
    <h1>Count: {{ count }}</h1>
    <button @click="increment">Increment</button>
    <button @click="decrement">Decrement</button>
  </div>
</template>

使用pinia-plugin-persistedstate持久化存储（组件式为例）

下面是一个类似的示例，展示了如何在 Pinia store 中使用组件式的持久化存储：

import { defineStore } from 'pinia';
import { ref, computed } from 'vue';

export const useCounterStore = defineStore('counter', () => {
   // 定义状态
   const count = ref(100);
   const msg = ref('hello pinia');

   // 定义方法
   const addCount = () => count.value++;
   const subCount = () => count.value--;

   // 定义计算属性
   const double = computed(() => count.value * 2);

   // 返回状态和方法
   return {
     count,
     addCount,
     subCount,
     double,
     msg,
   };
}, {
   // 持久化配置
   persist: {
     key: 'hahaha', // 持久化存储的键名
     paths: ['count', 'msg'], // 指定需要持久化的状态路径
   },
});

在这个示例中，我们定义了一个名为 useCounterStore 的 Pinia store，其中包含 count 和 msg 两个状态，以及 addCount、subCount 两个方法来修改 count 的值。我们还定义了一个计算属性 double，用于计算 count 的两倍。

在 persist 配置中，我们指定了 key 为 'hahaha'，这将作为存储在本地存储中的键名。paths 数组包含了需要持久化的状态路径，这里我们指定了 count 和 msg。

当热还有其他的persist配置，不太常用就不讲了，有兴趣的小伙伴可以去官网查看（结尾会放）

Pinia进阶特性

插件系统和自定义插件的创建

Pinia 提供了一个强大的插件系统，允许开发者扩展其功能。创建自定义插件可以让你添加全局状态、拦截actions、添加全局getters等。

1.创建插件：
创建一个插件通常涉及定义一个函数，该函数接收一个Pinia实例作为参数，并对其进行操作。

export function myPiniaPlugin(pinia) {
  // 可以在这里添加全局状态、拦截actions等
}

2.使用插件：
在创建Pinia实例时，可以将插件添加到实例中。

const pinia = createPinia()
pinia.use(myPiniaPlugin)

模块化store和命名空间

Pinia 支持模块化store，允许你将不同的状态逻辑分割到不同的文件中，提高代码的可维护性。

1.定义模块化store：
在模块化store中，你可以定义自己的state、getters和actions。

// store/modules/counter.js
import { defineStore } from 'pinia'

export const useCounterStore = defineStore('counter', {
  state: () => ({ count: 0 }),
  actions: {
    increment() {
      this.count++
    },
    decrement() {
      this.count--
    }
  }
})

2.使用命名空间：
在模块化store中，你可以使用命名空间来避免不同模块间的命名冲突。

// store/modules/counter.js
import { defineStore } from 'pinia'

export const useCounterStore = defineStore('counter', {
  state: () => ({ count: 0 }),
  actions: {
    increment() {
      this.count++
    },
    decrement() {
      this.count--
    }
  }
}, {
  // 开启命名空间
  namespaced: true
})

3.在组件中使用模块化store：
在组件中，你可以通过命名空间来访问特定模块的状态和actions。

import { useCounterStore } from '@/stores/modules/counter'

const counterStore = useCounterStore()
console.log(counterStore.count) // 使用命名空间访问状态
counterStore.increment() // 使用命名空间访问actions

 资料推荐

配置 | pinia-plugin-persistedstate官网

总结

掌握 Pinia 的使用，将有助于你在开发 Vue 3 应用时，更加高效地管理复杂的状态逻辑，提升应用的整体性能和用户体验。希望本文能为你在使用 Pinia 进行状态管理时提供有价值的参考和指导。