vuex中状态管理刷新页面时数据被清空的问题

一、前言

在vue项目中，当我们的应用遇到多个组件之间的共享问题时，通常会用到Vuex（一个状态管理的插件，可以解决不同组件之间的数据共享和数据持久化），解决组件之间同一状态的共享问题。但是在刷新页面后，vuex会重新更新state，所以，存储的数据会丢失。

二、解决办法

1.安装插件：npm install vuex-persistedstate --save
2.在store的index.js中，手动引入插件并配置

三、详细代码

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)
import createPersistedState from 'vuex-persistedstate'
export default new Vuex.Store({
  state: {
    msg: '原来vuex的state中的msg',
    num: 88
  },
  mutations: {
    changemut(state, data) {
      state.msg = data
    },
    changemutnum(state, data) {
      state.num = data
    }
  },
  actions: {
    changeact(ctx, data) {
      ctx.commit('changemut', data)
    },
    changeactnum(ctx, data) {
      ctx.commit('changemutnum', data)
    }
  },
  modules: {},
  plugins: [createPersistedState()] //存储到localStorage里
  // plugins: [
  //   createPersistedState({
  //     storage: window.sessionStorage
  //   })
  // ] //存到session中
})

链接: https://www.jianshu.com/p/68899f05e469.
链接: https://blog.youkuaiyun.com/baidu_33548663/article/details/96431322.