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

前言

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

解决办法

使用vuex-persistedstate 插件

1.安装插件：npm install vuex-persistedstate --save

2.在store的index.js中，手动引入插件并配置

import createPersistedState from "vuex-persistedstate"

export default new Vuex.Store({

state,

getters,

mutations,

actions,

// 如果此刻想配置多个选项，将plugins写成一个一维数组，不然会报错

plugins: debug ? [createLogger(), createPersistedState()] : [createPersistedState()]

})

这样的话会在Application里面看到一个vuex的存储，但是该插件默认持久化所有state，我们也可以指定需要持久化的state：

import createPersistedState from "vuex-persistedstate"

const store = new Vuex.Store({

// ...

plugins: [createPersistedState({

storage: window.sessionStorage,

reducer(data) {

return {

// 设置只储存state中的boxId

boxId: data.boxId

}

}

})]