Vue项目实践-vuex-persistedstate-modules内持久化使用

1、背景

vuex可以进行全局的状态管理，但刷新后刷新后数据会消失，使用vuex-persistedstate可以对部分数据进行数据持久化，刷新后数据不消失。

• vuex-persistedstate存储数据默认方式为localStorage， localStorage 用于长久保存整个网站的数据，保存的数据没有过期时间，直到手动去删除，且localStorage属性是只读的。
• 如果你只想将数据保存在当前会话中，可以使用sessionStorage属性， 该数据对象临时保存同一窗口(或标签页)的数据，在关闭窗口或标签页之后将会删除这些数据。

详细了解查看官网 组件github官网

本文章使用localStorage,sessionStorage进行数据持久化

2、安装插件vuex-persistedstate

yarn add vuex-persistedstate

3、配置vuex-persistedstate组件-store/index.js文件内修改

//持久化插件
import createPersistedState from 'vuex-persistedstate';

4、使用方式-store/index.js文件内修改，modules内state进行持久化使用

//store/login/login.js
const login = {
    state: {
        isLogin: false,
        userInfo: {}
    },
    getters: {},
    actions: {},
        mutations: {}
};
export default login;

paths给定路径，可以指定持久化的具体数据 未给出路径完成状态保存

//举例此为登录的store文件
import login from '@/store/login/login';

//localStorage缓存,需要手动删除或者重新赋值才会修改
const vuexLocal = createPersistedState({
  key: 'vuexLocal',
  storage: window.localStorage,
  paths: ['login.isLogin']
});

//会话关掉,数据清空
const vuexSession = createPersistedState({
     key: 'vuexsession',
     storage: window.sessionStorage,
     paths: ['login.userInfo']
});
export default new Vuex.Store({
    state: {},
  mutations: {},
  getters: {},
  actions: {},
  modules: {
    login
  },
  plugins: [vuexLocal, vuexSession]
});

5、在f12审查的Application内可以看到

vuexSession

vuexLocal