Vuex数据持久化存储插件vuex-persistedstate

前言(废话篇)

vuex 的状态存储并不能持久化。也就是说当你存储在 Vuex 中的 store 里的数据，只要一刷新页面或者关闭页面，数据就丢失了，vuex的数据就初始化了。

要实现持久化存储，简单来说就是将其状态保存到localStorage或者sessionStorage中，然后在给每个状态默认值的时候就从localStorage或sessionStorage中取就可以了也就是咱们直接手写来手动保存和读取数据

另外一种方式就是使用第三方插件（vuex-persistedstate）

手动实现就默认大家都会了，然后主要就看一下vuex-persistedstate吧

我碰到的问题(废话篇)

写这篇文章是因为我在项目中碰到一个问题，算是记录一下吧

我的问题大概就是：首先我在vuex设置了 homeShowWhat: null,

在未登录的状态已经获取到了用户是以什么身份登录，并且在此刻使用vuex的方法用户保存了这个身份，

然后如果不进行持久化存储的话，当我登陆成功后，由于页面的刷新跳转，vuex的数据初始化了，我拿到的homeShowWhat为 null，页面不显示了。 眼睛比较尖锐的我发现，在页面跳转之前，页面因为homeShowWhat拿到了值其实是发生了我想要变化的，但是页面刷新后，就呈现值为null的效果。

如何使用第三方插件 vuex-persistedstate

废话不多说，直接上例子：

1. 安装插件：

npm install vuex-persistedstate

2.在你的 Vuex store 配置中使用这个插件：

import Vue from 'vue';
import Vuex from 'vuex';
import createPersistedState from 'vuex-persistedstate';

Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    // ... your other state properties ...
    homeShowWhat: '',
  },
  mutations: {
    // ... your mutations ...
    setHomeShowWhat(state, val) {
      state.homeShowWhat = val;
    },
  },
  actions: {
    // ... your actions ...
  },
  plugins: [
    createPersistedState({
      paths: ['homeShowWhat'], // 持久化存储的state数据
    }),
  ],
  modules: {
    // ... your modules ...
  },
})

总结

上面是用了vuex-persistedstate插件实现，使用vuex-persist这个应该也是可以的。

其实上面插件的原理跟咱们最上面的手写的一样，也就是将状态存储到本地缓存，达到持久化存储的效果，我自己用的时候，可能都是自己手写存储就可，当然完全可以使用插件，也是看自己喜好。