【Vue3】状态管理 Pinia
1. 什么是Pinia
Pinia是Vue的专属状态管理库，Pinia是为了设计一个能够拥有组合式API的Vue状态管理库。和Vuex的集中式架构不同的是，Pinia采用分布式的架构，每个模块都有自己的状态树。这种设计使得Pinia在处理大型应用时能提供更好的模块化和可维护性。
2. Pinia有什么用
使用Pinia，它允许你跨组件和页面共享状态。如果使用Pinia，即使在小型单页面应用中，也可以有如下功能：
- DevTools支持：
- 追踪actions、mutations的时间线
- 在组件中展示他们所用到的store
- 热更新：
- 不必重载页面即可修改Store
- 开发时可保持当前的State
- 插件：可通过插件扩展Pinia功能
- 更好的适配Typescript
- 支持服务端渲染
3. 如何创建Pinia
- 安装pinia：
安装命令：npm install pinia
注意：一般来说，如果你使用vite搭建项目，可选择在创建的时候就配置Pinia，就不用自己去下载了。
- 创建Pinia
在src根目录下创建文件夹store，在其中创建index.ts文件
// src/store/index.ts
// 引入pinia
import { createPinia } from 'pinia'
// 创建大仓库
const pinia = createPinia()
// 导出仓库
export default pinia
- 注册Pinia
在main.ts中注册pinia（创建Pinia其实也可在main.ts中进行）
// main.ts
// 引入createApp用于创建应用
import { createApp } from "vue";
// 引入App根组件
import App from "./App.vue";
// 引入pinia
import pinia from '@/store'
// createApp(App)用于创建应用，mount("#app")用于挂载应用
createApp(App).use(pinia).mount("#app");
至此，Pinia的引入和创建就完成了，接下来可以根据业务需要创建小仓库了。
- 创建小仓库
// 一个栗子
// 文件路径：src/store/modules/calc.ts
// 引入defineStore用于创建小仓库
import { defineStore } form 'pinia'
// 定义仓库并导出，注意defineStore()需要一个唯一标识，在下方例子中，这个标识就是'calc'
export const useCalcStore = defineStore('calc',{
// 存储数据的地方
state(){
return {
num1:0,
num2:1,
sum:0
...
...根据业务需要存储数据...
}
},
// actions中存放方法，用于响应组件中的动作，在Vue3中合并了Vuex的actions和mutations，统一使用actions
actions:{
// 数字累加的方法
increment(val){
this.sum += val
}
...根据业务需要创建方法...
},
// getter类似于计算属性
getter:{
// 把sum数值翻倍
doubleCount(state) {
return state.sum * 2
}
}
})
- 在Vue中使用store
// Vue文件
// 引入仓库
import { useCalcStore } from '@/store/modules/calc'
//创建仓库
const calcStore = useCalcStore()
// 可直接通过 .xxx 获取仓库里的值和方法
let sum = calcStore.sum
//如果要修改store中的数据
// 1.可以直接修改
calcStore.sum = 10 // 将sum的值修改为10
// 2.可以通过函数修改
function add() {
calcStore.increment(10) // 通过increment函数将 sum的值加10
}
