持久化pinia状态

持久化 `pinia` 状态

在实际开发中，当浏览器刷新时，有些数据就会被初始化，但是我们希望将一些数据保存下来。如用户登录后，用户信息会存储在全局状态中，如果不持久化状态，那么每次刷新用户都需要重新登录了。

解决这个问题有很多种方法，在状态改变时将其同步到浏览器的存储中，如 cookie、localStorage、sessionStorage 。每次初始化状态时从存储中去获取初始值即可。

但是这里我们用到pinia，我们可以用pinia 的插件 pinia-plugin-persistedstate 来实现。

安装

pnpm : pnpm install pinia-plugin-persistedstate
npm : npm install pinia-plugin-persistedstate
yarn : yarn add pinia-plugin-persistedstate

我们将之前引入的pinia做一些调整，并且模块化我们的store。

在store/index.js中实例化pinia,并且插入pinia-plugin-persistedstate ，导出pinia

import { createPinia } from 'pinia'
import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'

const pinia = createPinia()

pinia.use(piniaPluginPersistedstate)

export default pinia

在store/module目录下写我们的store模块。

在需要持久化状态的模块中设置 persist，defineStore 第一个参数定义唯一的模块名，第二个参数传递 storeSetup，其实还有第三个参数 options，在 options 中便可开启 persist：

export const useCommonStore = defineStore('common',{
    state: () => {
        return {
            // 定义一个是否展开的字段isCollapse
            isCollapse: false
        }
    },
    getters: {
        
    },
    actions: {
       
    },
    persist: true
})

persist

persist 支持多种类型的值，最简单的就是传递 true，此时会将状态缓存在 localStorage 中，该 localStorage 的 key 为模块名（defineStore 的第一个参数）,value 为该模块的状态对象。

如果需要将其存储在 sessionStorage 中，就需要设置 persist 的值为一个对象：

export const useCommonStore = defineStore('common',{
    state: () => {
        return {
            // 定义一个是否展开的字段isCollapse
            isCollapse: false,
            counter: 1,
        }
    },
    getters: {
        
    },
    actions: {
       increment() {
            this.counter++
        },
    },
   // 将其存储在 `sessionStorage` 中
    persist: {
        key: 'all',
        storage: sessionStorage
    },
    // 可以通过为属性指定选项来配置持久化方式persist
   // persist: {
    //     paths: ['isCollapse'],
    //     storage: sessionStorage
    // },
}
})

在路由守卫中使用状态

我们知道了如何在组件中使用状态值，那么在全局路由守卫中如何获取状态值。

我们看一下官网给的这个使用 Vue Router 的导航守卫内部的 store 的例子就是知道了：

import { createRouter } from 'vue-router'
const router = createRouter({
  // ...
})

// ❌ 根据导入的顺序，这将失败
const store = useStore()

router.beforeEach((to, from, next) => {
  // 我们想在这里使用 store 
  if (store.isLoggedIn) next()
  else next('/login')
})

router.beforeEach((to) => {
  // ✅ 这将起作用，因为路由器在之后开始导航
   // 路由已安装，pinia 也将安装
  const store = useStore()

  if (to.meta.requiresAuth && !store.isLoggedIn) return '/login'
})