在Vue3中使用pinia实现持久化

第一步：安装pinia以及持久化插件pinia-plugin-persist

yarn add pinia pinia-plugin-persist

第二步：在main.js中全局引入

// 使用pinia作为临时仓库
import { createPinia } from 'pinia'
// 引入持久化插件
import piniaPluginPersist from 'pinia-plugin-persist'
const pinia = createPinia()
// 使用该插件
pinia.use(piniaPluginPersist)
app.use(pinia)

第三步：在src文件夹下创建store文件夹并在其下创建index.js文件作为临时仓库

import { defineStore } from 'pinia'
export const useStore = defineStore('store', {
  state: () => {
    return {
      isCollapsed: false,// 侧单栏是否折叠
    }
  },
  actions: {
    // 修改侧单栏的折叠状态的方法
    setCollapsed (value) {
      this.isCollapsed = value
    }
  },
  // 使用该插件，开启数据缓存
  persist: {
    enabled: true,   // 表示启用数据持久化
    // 使用strategies可以自定义持久化存储
    /*
      如果只写storage的话，就是将所有的数据都存储下来
      key:指定要持久化的状态的键名。这个键名将用于在持久化存储中存储和检索状态的值。
      storage：指明要将数据存储到localStorage还是sessionStorage当中
      paths：指明要持久化存储的字段是那些
    */
    strategies: [
      // isCollapsed字段用 localstorage存储
      { storage: localStorage },
       
       // 如果不写 key 和 paths 属性，则表示将所有状态都进行持久化存储。这意味着所有在 state 中定义的状态属性都会被存储到本地存储中
      // {key:'store', storage: localStorage, paths: ['isCollapsed'] },
    ],
  },
})