Bootstrap

Vue3+vite搭建基础架构(8)--- 使用pinia-plugin-persist

说明

这里记录下自己在Vue3+vite的项目使用pinia-plugin-persist缓存全局状态属性到sessionStorage的过程,不使用ts语法,方便以后直接使用。这里承接自己的博客Vue3+vite搭建基础架构(7)— 使用pinia这篇博客,在该博客项目的基础上增加使用pinia-plugin-persist。

官方文档

Vue3使用pinia-plugin-persist官方文档:https://seb-l.github.io/pinia-plugin-persist/

安装pinia-plugin-persist

根据官网给的安装命令如下:

npm install pinia-plugin-persist

在webstorm里面的Terminal输入npm install pinia-plugin-persist命令安装该依赖。执行完如下:
在这里插入图片描述
package.json会增加pinia-plugin-persist版本号
在这里插入图片描述

使用pinia-plugin-persist

在src目录下的store文件夹下的index.js文件增加如下代码:
在这里插入图片描述

store文件夹下的index.js代码:

//使用pinia来管理全局状态
import { createPinia } from 'pinia'
//使用persist该插件将pinia里面的state里面的属性进行缓存到localStorage或者sessionStorage里面
import piniaPluginPersist from 'pinia-plugin-persist'

const pinia = createPinia()
//将persist插件放到pinia里面
pinia.use(piniaPluginPersist)

export default pinia

在store文件夹下modules文件夹下的userStore.js中增加使用pinia-plugin-persist代码:

//使用pinia来管理全局状态
import { defineStore } from "pinia"

/*defineStore 是需要传参数的,其中第一个参数是id,就是一个唯一的值,
简单点说就可以理解成是一个命名空间.
第二个参数就是一个对象,里面有三个模块需要处理,第一个是 state,
第二个是 getters,
第三个是 actions。
*/
//声明了一个useUserStore方法
const useUserStore = defineStore('user', {
  //准备state——用于存储数据
  state: () => {
    return {
      count: 0
    }
  },
  //使用persist插件对state里面属性进行缓存
  persist: {
    enabled: true,//开启缓存,默认缓存所有state里面的属性,默认key为defineStore里面的id值,这里id值为user,所以默认key为user
  },
  getters: {

  },
  //准备actions——用于响应组件中的动作和用于操作数据(state),pinia中只有state、getter、action,抛弃了Vuex中的Mutation
  actions: {
    increment() {
      console.log("我来到actions方法里面了")
      this.count++
      return this.count
    }
  }
})

export default useUserStore

测试pinia-plugin-persist进行缓存

使用上一篇博客的home文件夹下的index.vue代码,测试结果如下,发现已经成功缓存到sessionStorage里面:
在这里插入图片描述
但是这样有个问题,它是将state下的所有属性全部都存到key为user(因为defineStore里面的id值你写的是user,所以这里的key值就是user)里面,这里新增2个属性,如下:
在这里插入图片描述
测试结果如下:
在这里插入图片描述
如果想将存储的全局属性拆开一个key对应一个value值并且不想存储全部state下面的属性值的话,代码修改如下,增加strategies属性自定义你要缓存的属性,比如我这里将count和msg进行了缓存,name没有进行缓存。

//使用pinia来管理全局状态
import { defineStore } from "pinia"

/*defineStore 是需要传参数的,其中第一个参数是id,就是一个唯一的值,
简单点说就可以理解成是一个命名空间.
第二个参数就是一个对象,里面有三个模块需要处理,第一个是 state,
第二个是 getters,
第三个是 actions。
*/
//声明了一个useUserStore方法
const useUserStore = defineStore('user', {
  //准备state——用于存储数据
  state: () => {
    return {
      count: 0,
      msg:'hello',
      name:'测试'
    }
  },
  //使用persist插件对state里面属性进行缓存
  persist: {
    enabled: true,//开启缓存,默认缓存所有state里面的属性,默认key为defineStore里面的id值,这里id值为user,所以默认key为user
    //自定义持久化参数,指定以下state里面的属性进行缓存,未指定的不进行缓存
    strategies: [
      {
        // 自定义key
        key: 'count',
        // 自定义存储方式,默认sessionStorage
        storage: sessionStorage,
        // 指定要持久化的数据
        paths: ['count']
      },
      {
        key: 'message',
        storage: sessionStorage,
        paths: ['msg']
      }
    ]
  },
  getters: {

  },
  //准备actions——用于响应组件中的动作和用于操作数据(state),pinia中只有state、getter、action,抛弃了Vuex中的Mutation
  actions: {
    increment() {
      console.log("我来到actions方法里面了")
      this.count++
      return this.count
    }
  }
})

export default useUserStore

重新启动项目,不重新启动项目的话,user缓存还在,所以需要重新启动项目,测试结果如下:
在这里插入图片描述

到这里pinia-plugin-persist的使用测试就结束了。该插件的主要作用就是用来缓存state里面的属性到sessionStorage或者LocalStorage里面。后面主要用于缓存项目里面的菜单栏激活属性和Tab页激活属性以及历史路由及参数,是一个很重要的插件。

;