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 分钟前
Three.js入门-Raycaster鼠标拾取详解与应用
开发语言·javascript·计算机外设·webgl·three.js
是小崔啊12 分钟前
开源轮子 - EasyExcel01(核心api)
java·开发语言·开源·excel·阿里巴巴
tianmu_sama18 分钟前
[Effective C++]条款38-39 复合和private继承
开发语言·c++
黄公子学安全21 分钟前
Java的基础概念(一)
java·开发语言·python
liwulin050622 分钟前
【JAVA】Tesseract-OCR截图屏幕指定区域识别0.4.2
java·开发语言·ocr
jackiendsc26 分钟前
Java的垃圾回收机制介绍、工作原理、算法及分析调优
java·开发语言·算法
Oneforlove_twoforjob30 分钟前
【Java基础面试题027】Java的StringBuilder是怎么实现的?
java·开发语言
羚羊角uou33 分钟前
【C++】优先级队列以及仿函数
开发语言·c++
FeboReigns39 分钟前
C++简明教程(文章要求学过一点C语言)(1)
c语言·开发语言·c++
FeboReigns42 分钟前
C++简明教程(文章要求学过一点C语言)(2)
c语言·开发语言·c++