前言:V3中的pinia其实就是vuex的升级版,用法跟vuex差不多,都是作为属性存储和传值的工具,但它们都有个问题,就是当页面刷新过后,更新的值都会丢失。这里就做个记录,也给大家分享下pinia的基本用法跟如何持久化存储数据。
1.安装pinia
使用npm安装
npm install pinia@next
使用yarn安装
yarn add pinia@next
2.安装pinia持久化存储插件
使用npm安装
npm install piniaPluginPersistedstate
使用yarn安装
yarn add piniaPluginPersistedstate
3.创建counter.js文件(文件名称随意)来配置pinia数据,如下所示
//counter.js文件
import { defineStore } from 'pinia'
const userMsgStore = defineStore('userMsg',{
state: () => ({
//假设需要存储的数据,是以下这些字段
count: 0,
username:'小明',
age:'20',
money:100,
}),
getters: {
},
actions: {//定义更改state存储的数据的方法
//金额增加
incrementCount() {
this.money ++
},
//更改姓名
changeUsername(newName) {
this.username = newName
},
//更改金额
changeMoney(newMoney) {
this.money = newMoney
},
},
//下面是对数据持久化存储的配置信息
// persist: true,
persist: {
key: 'piniaStore', //存储名称
storage: sessionStorage, // 存储方式,存sessionStorage或者localStorage都行
paths: ['money'], //指定 state 中哪些数据需要被持久化。[] 表示不持久化任何状态,undefined 或 null 表示持久化整个 state
},
})
export default userMsgStore
4.在main.js文件中,我们引入并且注册pinia和持久化存储插件。
//main.js中
import { createPinia } from 'pinia'
import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'
const pinia = createPinia();
pinia.use(piniaPluginPersistedstate);
5.现在我们试着使用pinia,如下图所示:
我们在msg.vue页面中,引入之前配置的counter.js文件,我们点击“点击增加”按钮时,pinia存储的money值则会增加,username信息也在页面上显示。由于在counter.js里面给“money”字段增加了持久化存储,再次刷新页面,money存储的数据还是没发生变化,说明pinia数据持久化成功!