vue3 pinia状态管理重点概念理解和持久化

1.安装

#pinia状态管理
npm install -g pinia
#pinia状态管理 - 持久化
npm install -g pinia-plugin-persist

2.使用

• 1：项目根目录：main.js全局引入，内容如下：

import { createPinia } from 'pinia'; //pinia状态管理
import piniaPluginPersist from 'pinia-plugin-persist'; //pinia状态管理 - 持久化
const pinia = createPinia()
pinia.use(piniaPluginPersist)

app.use(pinia)

• 2：项目根目录：创建store.js，内容如下：

import { defineStore } from 'pinia'
//defineStore函数可以接收三个参数：idOrOptions、setup、setOptions
//你可以对 `defineStore()` 的返回值进行任意命名，但最好使用 store 的名字，同时以 `use` 开头且以 `Store` 结尾。(比如 `useUserStore`，`useCartStore`，`useProductStore`)
// 第一个参数是你的应用中 Store 的唯一 ID。
export const useTestStore = defineStore('此参数要求是当前项目中一个独一无二的名字，如：storeTest', {
	state:() => ({ total:5, name:'张三' }), //定义的状态对像,固定格式：state:() => ({ })
	getters:{ //getters获取状态值，根据total值变化而变化，类似 vue 中 计算属性：computed
		totalTwo:(state) => { state.total += 10 }
	},
	//内定方法，供外部调用
	actions:{
		add(){
			this.total++; //state中的total，此处使用 this.total 获取
		}
	},
	//数据持久化配置，页面刷新，数据不会被重置
	persist:{
		enabled: true, //开启
		strategies:[
			{
				key: 'testInfo', //存储的 key名字，随便取
				//paths: ['total'], //指定要存储的字段名，否则会存储定义的所有字段
				storage: localStorage, //表示存储在 window.localStorage 中
				//storage: sessionStorage, //表示存储在 window.sessionStorage 中
			}
		]
	}
})

• 3：vue文件中使用，项目根目录：App.vue，script内容如下：

import { useTestStore } from '项目根目录store.js，如：./store'
const storeTest = useTestStore(); //格式：项目唯一名字，如：storeTest = 项目根目录store.js中export的名字useTestStore
//取值
storeTest.total //state中定义
storeTest.totalTwo //getters中计算属性定义
//修改
方式1：直接 storeTest.total++
方式2：storeTest.$patch({ total: 20 })
方式3：storeTest.$patch((state) => { //函数修改且可自定义业务逻辑
			state.total = 20
			state.name = '李四'
	 })
方式4：storeTest.add(); //调用actions内定义的 add 方法
//重置，重置store为初始状态
storeTest.$reset();

• 4：订阅：subscribe 或 onAction，vue文件中使用，项目根目录：App.vue，script内容如下：
  subscribe 订阅可以理解为vue的watch，状态值改变会触发此方法

//1.监听 state 中定义的值：state:() => ({ total:5, name:'张三' })
storeTest.$subscribe((args, state) => {
	console.log(args, state)
})
//2.监听 actions 中的改变，actions中的方法被调用时会触发此方法
storeTest.$onAction(args => {
	console.log(args)
})

3.总结

//2个基本方法patch、reset
//2个监听方法subscribe、onAction
store.$patch
store.$reset
store.$subscribe
store.$onAction