問題背景：

Vuex 解決了多視圖之間的數(shù)據(jù)共享問題。但是運(yùn)用過程中又帶來了一個(gè)新的問題是，Vuex 的狀態(tài)存儲(chǔ)并不能持久化。也就是說當(dāng)你存儲(chǔ)在 Vuex 中的 store 里的數(shù)據(jù)，只要一刷新頁面，數(shù)據(jù)就丟失了。

引入vuex-persist 插件，它就是為 Vuex 持久化存儲(chǔ)而生的一個(gè)插件。不需要你手動(dòng)存取 storage ，而是直接將狀態(tài)保存至 cookie 或者 localStorage 中。具體用法如下：

pexels-photo-1211847.jpeg

安裝：

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

引入：

import VuexPersistence from 'vuex-persist'

先創(chuàng)建一個(gè)對(duì)象并進(jìn)行配置：

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

引入進(jìn)vuex插件：

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

通過以上設(shè)置，在圖3中各個(gè)頁面之間跳轉(zhuǎn)，如果刷新某個(gè)視圖，數(shù)據(jù)并不會(huì)丟失，依然存在，并且不需要在每個(gè) mutations 中手動(dòng)存取 storage 。

vuex-persist 的詳細(xì)屬性：