vuex刷新页面数据消失解决方案(vuex-persistedstate)

1,第一步当然是安装插件

安装vuex-persistedstate：npm install vuex-persistedstate -s

2,当然是在你的store文件夹的index.js中引入插件

import createPersistedState from ‘vuex-persistedstate’

3,当然是配置了,可以直接在你的store文件夹的index.js中配置.

plugins:[
createPersistedState({
storage:window.sessionStorage, //也可以使用localtionstorage
reducer(val){
return {
userinfor:val.userinfor
}
}
}),
]
全部代码如下:

import Vue from 'vue'
import Vuex from 'vuex'
import createPersistedState from 'vuex-persistedstate'

Vue.use(Vuex)

const store = new Vuex.Store({
  state: {
    userinfor:{
      'token':'',
      'rolePowers':[],//按钮权限
      "userRoleId":'',//"用户角色Id",
      "userRoleName":'',// "用户角色名",
      'RelationDiningNoList':"",//关联餐厅
      "RelationStallNo":"", //关联档口
      'sign':'',//认证签名

    }
  },
  mutations: {
    setUserinfor: (state, userinfordata) => {
      state.userinfor.token = userinfordata.token;
      state.userinfor.rolePowers = JSON.stringify(userinfordata.rolePowers);
      state.userinfor.userRoleId = userinfordata.userRoleId;

      state.userinfor.userRoleName = userinfordata.userRoleName;
      state.userinfor.RelationDiningNoList = JSON.stringify(userinfordata.RelationDiningNoList);
      state.userinfor.RelationStallNo = JSON.stringify(userinfordata.RelationStallNo);
      // state.userinfor.userRoleId = userinfordata.userRoleId;
    },
    setSign:(state,signdata)=> {
      state.userinfor.sign = signdata;
    },
  },
  plugins:[
    createPersistedState({
      storage:window.sessionStorage,
      reducer(val){
        return {
          userinfor:val.userinfor
        }
      }
    }),
  ]

})


export default store