vuex存储复杂参数(如对象数组等)刷新数据丢失的解决方法

问题描述：

在使用 vuex 进行数据管理时，如果存储了复杂参数例如对象数组等，当页面刷新时会发现数据丢失，这是因为 vuex 存储在内存中，刷新页面时内存被清空导致的。

解决方法：

我们可以通过以下步骤将 vuex 中的数据存储到本地存储中，以便在刷新页面后能够恢复数据。

1. 安装 vuex-persistedstate

shell
npm install vuex-persistedstate --save

1. 在 store/index.js 中引入 vuex-persistedstate 并注入 Vuex 实例：

```js
import persistedState from 'vuex-persistedstate';
import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

export default new Vuex.Store({
plugins: [
persistedState()
]
// ...
});
```

当使用默认配置时，所有的 state 将被存储在浏览器的 localStorage 中。如果你需要将 state 存储在其他地方，例如 sessionStorage，你可以传递一个配置对象：

js
{
storage: window.sessionStorage
}

你还可以选择性地只将部分 state 存储到本地存储中。例如，你可能想要让一个 currentUser 对象可持久化，但不想让其他 state 被持久化。在这种情况下，你可以传递一个 paths 数组：

js
{
paths: ['currentUser']
}

1. 示例说明：

假设我们要存储一个对象数组 todos。我们可以像下面这样在 store 中使用：

```js
import Vue from 'vue';
import Vuex from 'vuex';
import persistedState from 'vuex-persistedstate';

Vue.use(Vuex);

export default new Vuex.Store({
state: {
todos: [
{ id: 1, text: 'Learn Vue.js', done: false },
{ id: 2, text: 'Learn Vuex', done: false },
{ id: 3, text: 'Build a Vuex App', done: true },
]
},
mutations: {
addTodo(state, todo) {
state.todos.push(todo);
}
},
plugins: [
persistedState()
]
});
```

当我们添加一个新的 todo 时，它会被推入到 state.todos 数组中，并自动存储在本地存储中：

js
this.$store.commit('addTodo', { id: 4, text: 'Test Vuex', done: false });

1. 另一条示例说明：

假设我们需要存储一个对象，包含一个数组和一个字符串属性：

js
state: {
myObject: {
myList: [],
myString: ''
}
},

那么我们可以这样配置 vuex-persistedstate：

js
export default new Vuex.Store({
state: {
myObject: {
myList: [],
myString: ''
}
},
mutations: {
setMyObject(state, myObject) {
state.myObject = myObject;
},
addToList(state, item) {
state.myObject.myList.push(item);
}
},
plugins: [
persistedState({
paths: ['myObject'],
reducer: (state, paths) => {
// 只保留 myObject 对象中的 myList 和 myString 属性
// 其他属性将被忽略
return {
myObject: {
myList: state.myObject.myList,
myString: state.myObject.myString
}
};
}
})
]
});

使用 reducer 函数，我们可以选择哪些属性需要被存储。上面的示例中，我们只存储了 myList 和 myString 属性，而忽略了其他属性。这可以帮助我们在存储大量数据时减小存储空间的占用。