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

1.安装

bash 复制代码
#pinia状态管理
npm install -g pinia
#pinia状态管理 - 持久化
npm install -g pinia-plugin-persist

2.使用

  • 1:项目根目录:main.js全局引入,内容如下:
bash 复制代码
import { createPinia } from 'pinia'; //pinia状态管理
import piniaPluginPersist from 'pinia-plugin-persist'; //pinia状态管理 - 持久化
const pinia = createPinia()
pinia.use(piniaPluginPersist)

app.use(pinia)
  • 2:项目根目录:创建store.js,内容如下:
bash 复制代码
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内容如下:
bash 复制代码
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,状态值改变会触发此方法
bash 复制代码
//1.监听 state 中定义的值:state:() => ({ total:5, name:'张三' })
storeTest.$subscribe((args, state) => {
	console.log(args, state)
})
//2.监听 actions 中的改变,actions中的方法被调用时会触发此方法
storeTest.$onAction(args => {
	console.log(args)
})

3.总结

bash 复制代码
//2个基本方法patch、reset
//2个监听方法subscribe、onAction
store.$patch
store.$reset
store.$subscribe
store.$onAction
相关推荐
断竿散人2 分钟前
乾坤微前端框架的沙箱技术实现原理深度解析
前端·javascript·前端框架
uhakadotcom5 分钟前
在python中,使用conda,使用poetry,使用uv,使用pip,四种从效果和好处的角度看,有哪些区别?
前端·javascript·面试
鹏多多9 分钟前
深入解析vue的keep-alive缓存机制
前端·javascript·vue.js
吃饺子不吃馅28 分钟前
为什么SnapDOM 比 html2canvas截图要快?
前端·javascript·面试
mCell8 小时前
GSAP ScrollTrigger 详解
前端·javascript·动效
gnip8 小时前
Node.js 子进程:child_process
前端·javascript
codingandsleeping14 小时前
使用orval自动拉取swagger文档并生成ts接口
前端·javascript
白水清风15 小时前
微前端学习记录(qiankun、wujie、micro-app)
前端·javascript·前端工程化
用户221520442780015 小时前
new、原型和原型链浅析
前端·javascript
阿星做前端15 小时前
coze源码解读: space develop 页面
前端·javascript