vuex可以进行全局的状态管理，但刷新后刷新后数据会消失，有的时候需要做到持久化，比如token，我们可以结合本地存储做到数据状态持久化，但是太麻烦每次都要操作，利用vuex-persistedstate插件可以简单许多

1.安装

npm install vuex-persistedstate --save

2.使用vuex-persistedstate默认存储到localStorage

引入及配置：在store下的index.js中

import createPersistedState from "vuex-persistedstate"
const store =newVuex.Store({
 state: { ... },
 mutations: { ... },
 actions: { ... },
 plugins: [createPersistedState()]
})

3.使用vuex-persistedstate存储到sessionStorage

引入及配置：在store下的index.js中

import createPersistedState from "vuex-persistedstate"
const store = newVuex.Store({
 state: { ... },
 mutations: { ... },
 actions: { ... },
 plugins: [createPersistedState({
 storage: window.sessionStorage,})]
})

4.使用vuex-persistedstate指定需要持久化的state

引入及配置：在store下的index.js中

import createPersistedState from "vuex-persistedstate"

const store = newVuex.Store({
 state: { ... },
 mutations: { ... },
 actions: { ... },
 plugins: [createPersistedState({
 storage:window.sessionStorage,
     reducer(val)  {
         return {
              // 只储存state中的token user
                token: val.token,
                user: val.user
         }
     }
 })]
}）

版权属于：小小窝/禾下月

本文链接：https://hxyxyz.top/index.php/Web/307.html

本站文章采用 知识共享署名4.0 国际许可协议 进行许可，请在转载时注明出处及本声明！