在開發 vue 專案的時候經常會用到 vuex 這個工具，它專門用於元件通訊及狀態儲存等。但是在使用 vuex 的過程中也發現了一些不可避免的槽點，那就是狀態保持。

　　通常當用戶點選重新整理或按下F5的時候那麼通過 vuex 儲存的資料將會在頁面再次載入完畢之後丟失，如果此時頁面上顯示的內容依賴於 vuex 中的資料，那麼相應內容將會載入不出來。為了解決這個問題今天給大家安利一個非常好用的關於 vuex 狀態保持的外掛——vuex-persist

　　它的實現原理是將資料備份到本地的localStorage、sessionStorage 或cookie 中，再在重新整理頁面之後從本地儲存中取回資料，以此實現了狀態保持這一功能。廢話不多說，接下來向大家介紹它的具體使用方法。

安裝依賴：

1 // npm
2 npm install --save vuex-persist
3 // yarn
4 yarn add vuex-persist

安裝成功後在store/index.js 檔案中進行如下配置：

引入外掛：

1 // 引入 vuex-persist
2 import VuexPersistence from 'vuex-persist'

建立物件：

1 const vuexLocal = new VuexPersistence({
2     storage: window.sessionStorage
3 })

在 vuex 中引入

1 export default
 
 new Vuex.Store({
2   state: { ... },
3   mutations: { ... },
4   actions: { ... },
5   plugins: [vuexLocal.plugin]
6 }) 

　　完成以上操作後便實現了 vuex 持久化儲存，即使重新整理頁面也不會造成資料丟失了。下面是關於vuex-persist 屬性的一些介紹

　　傳送門：https://github.com/championswimmer/vuex-persist