美文网首页
vuex状态持久化,vuex-persistedstate

vuex状态持久化,vuex-persistedstate

作者: w_小伍 | 来源:发表于2020-05-22 09:36 被阅读0次

    保存在vuex里的数据,页面刷新就会丢失,可以用vuex-persistedstate来持久化,默认用的是localStorage的存储方式
    安装

    npm install vuex-persistedstate --save-dev

    在store.js里引入

    import createPersistedState from 'vuex-persistedstate'

    const store = new Vuex.Store({
      state: {
        username: '',
        companyId: ''
      },
      mutations: {
         getUsername(state, payload) {
          // sessionStorage.setItem('username', JSON.stringify(payload))
          state.username = payload
        },
      getCompanyId(state, payload) {
          state.companyId = payload
        },
    },
    plugins: [
        createPersistedState(
          {
            reducer(state) {//state就是vuex的state对象
              return {
                companyId: state.companyId,
                username111: state.username,//username111:保存的key,s.username:保存的value
              }
            }
          }
        ),
      ],
    })
    

    相关文章

      网友评论

          本文标题:vuex状态持久化,vuex-persistedstate

          本文链接:https://www.haomeiwen.com/subject/krifahtx.html