Vue3中的pinia的使用和pinia数据的持久化存储

前言：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数据持久化成功！