Vuex实现数据持久化，数据刷新消失解决方案

Vuex实现数据持久化，数据刷新消失解决方案(新)

为什么会有vuex数据持久化这么一说呢？

在开发中，有一些全局数据，比如用户数据，系统数据等。这些数据很多组件中都会使用，我们当然可以每次使用的时候都去请求，但是出于程序员的“洁癖”、“抠”等等优点，还是希望一次请求，到处使用。

这时候很自然的想到存储在 localStorage 中，但是有个问题是，这些数据可能会变，如果没能及时同步的话，就会用到不正确的数据，即使做了数据同步，但是 localStorage 中的数据不是响应式的，不能自动更新使用到这些数据的地方。这时候就想要开始使用 vuex 了。

但是在使用 vuex 的时候也遇到很多问题，比如，“一刷新就没啦”：

vuex 的数据是存储在浏览器维护的内存中，页面刷新会重新初始化，简单的说，就是没了。
localStorage 的数据是存储在浏览器维护的一个简单数据库里面，在本地文件中存储，所以可以“持久化”存在。
所以“一刷新就没啦”是很正常的。

下面就是解决的方案

首先第一种
使用localStorage 来进行存储，但是这样有一个问题
我们的数据是会更新的，但是我们如果存进localStorage里，就无法实时更新我们的数据，
哪怕我们真的做了数据同步，他的数据也不是响应式的，所以这个方法不建议使用！

第二种 使用vuex的插件 来解决
使用vuex-persistedstate
首先我们先安装这个插件

npm i -S vuex-persistedstate

配置使用

在vuex初始化的时候作为组件去引入

import persistedState from 'vuex-persistedstate'
export default new Vuex.Store({
    // ...
    plugins: [persistedState()]
})

vuex-persistedstate默认使用localStorage来固化数据，一些特殊情况要如何应对呢？（如：Mac中的safari的无痕浏览模式）

这时候就需要使用sessionStorage

plugins: [
    persistedState({ storage: window.sessionStorage })
]

还有一种就是使用cookie的时候

import persistedState from 'vuex-persistedstate'
import * as Cookies from 'js-cookie'

export default new Vuex.Store({
  // ...
  plugins: [
    persistedState({
      storage: {
        getItem: key => Cookies.get(key),
        setItem: (key, value) => Cookies.set(key, value, { expires: 7 }),
        removeItem: key => Cookies.remove(key)
      }
    })
  ]
})

最后我们在页面里需要使用辅助函数以及dispatch来触发就可以实现数据持久化

这样我们就可以使用vuex来进行储存数据了