使用vuex解决刷新页面state数据消失的问题记录

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它集中式地管理应用的所有组件的状态，将组件之间的通信变得简单而流畅，解决了自然而然而产生的组件与组件之间的数据共享问题以及组件逻辑过于复杂的问题。但是在实际开发中，我们也会发现一些奇怪的问题，比如下面要讲的这种：

在使用 Vuex 状态管理的应用中，刷新页面后，应用的数据状态就消失了，重新进入应用会重新初始化，这个问题解决办法就是要将数据持久化保存，保证刷新页面后，数据还能被保留。

 

1.原因

为什么会出现这种问题呢？应用的状态是保存在内存中的，而刷新页面会重新载入应用，这意味着应用的状态随之丢失。 Vue.js 官方文档给出了一个解决方法，即使用本地存储（Local Storage）或者 Session Storage 来保存应用状态，但是这种方法只能保存简单的数据类型，而不能保存对象、数组等复杂的数据类型。

2.Vuex-persistedstate

Vuex-persistedstate 是一个用来解决这个问题的插件，它可以将 Vuex 的状态持久化到本地存储中，使得刷新页面后，应用状态能够被恢复。这个插件还支持使用不同类型的存储方案，比如 LocalStorage、SessionStorage、Cookie 等，非常方便。

使用 Vuex-persistedstate 插件的具体步骤如下：

安装插件

使用 npm 命令行安装 vuex-persistedstate 插件：

npm install vuex-persistedstate

2.在 Vuex 中导入插件

在 Vuex 的 store.js 中导入 vuex-persistedstate 插件，并将它绑定到 Vuex 上：

import Vuex from 'vuex'

import createPersistedState from 'vuex-persistedstate'

const store = new Vuex.Store({

   // ...

   plugins: [createPersistedState()]

})

3.配置插件

Vuex-persistedstate 支持传入一个配置对象来定制它的行为，下面是一些常用的配置项：

配置项 说明

key 数据在本地存储中的键名，默认为 vuex

storage 指定存储方式，可以是 LocalStorage、SessionStorage、Cookie 等，默认为 LocalStorage

reducer 回调函数，用来过滤持久化的数据，默认为存储全部数据

paths 指定哪些状态需要持久化，默认为全部状态

使用时，在创建 Vuex.Store 实例时传入配置项即可：

import Vuex from 'vuex'

import createPersistedState from 'vuex-persistedstate'

const store = new Vuex.Store({

   // ...

   plugins: [createPersistedState({

      key: 'mykey',

      paths: ['path1', 'path2', ['nested', 'path']]

   })]

})

4.使用

当你使用 Vuex 的 state 属性时，你应该把它当做只读的计算属性，而不是 being 的。为了在模板中使用它，你需要使用计算属性，如以下示例：

computed: {  状态管理

    count () {

      return this.$store.state.count

    }

  },

由于我们在 store.js 中配置了插件，使得数据可以被持久化保存，这意味着即使刷新页面，数据也不会丢失，相当于已经把我们的数据持久化保存到本地存储中，只需要从本地取出，重新初始化 store 即可。

本文简单介绍了在 Vue.js 应用程序中，使用 Vuex-persistedstate 插件来解决刷新页面数据丢失的问题，这个插件可以把应用的状态保存在本地存储中，这样就保证了即使刷新页面，应用状态也能被恢复。