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 。