Vuex持久化存储之vuex-persist

在引入mapMutations时报错，解决方法：

1：npm install --save-dev babel-plugin-transform-object-rest-spread

2：在package.json文件中引入下面两个插件（该步骤不知道有没有用到）

"babel-plugin-transform-runtime": "^6.22.0",
"babel-preset-stage-2": "^6.22.0",

3：安装插件后，接着在babel的配置文件 .babelrc 中应用插件

{
"presets": [
["env", { "modules": false }]
],
"plugins": ["transform-object-rest-spread"]
}

4：重新npm install

npm run dev 就可以了

Vuex 解决了多视图之间的数据共享问题。但是运用过程中又带来了一个新的问题是，Vuex 的状态存储并不能持久化。

也就是说当你存储在 Vuex 中的 store 里的数据，只要一刷新页面，数据就丢失了。

引入vuex-persist 插件，它就是为 Vuex 持久化存储而生的一个插件。

不需要你手动存取 storage ，而是直接将状态保存至 cookie 或者 localStorage 中。具体用法如下：

安装：

npm install --save vuex-persist
or
yarn add vuex-persist

引入：

import VuexPersistence from 'vuex-persist'

先创建一个对象并进行配置：

const vuexLocal = new VuexPersistence({
    storage: window.localStorage
})

引入进vuex插件：

const store = new Vuex.Store({
  state: { ... },
  mutations: { ... },
  actions: { ... },
  plugins: [vuexLocal.plugin]
}) 

通过以上设置，在图3中各个页面之间跳转，如果刷新某个视图，数据并不会丢失，依然存在，并且不需要在每个 mutations 中手动存取 storage 。