Vue-admin工做整理（十二）：Vuex-插件（持久化存儲）

Vuex能夠支持插件形式，來處理指定業務，好比：持久化存儲的插件（當每次刷新瀏覽器的時候store裏面的參數都會被清除，由於它是存在內存中的，而不是存在本地的，有時候咱們但願將一些東西存在本地）

插件實際上是一個函數，它只有一個參數就是store，這個函數實在store初始化的時候（實例初始化的時候）調用，刷新瀏覽器後第一次作的操做能夠定義在該函數裏，該操做由store的subscribe方法來完成，該方法是當每次提交mutation的時候，它都會執行subscribe裏面的回調函數，該回調函數有兩個參數：mutation（本次提交的muation的一些信息）、state（當前模塊的state）.

使用插件：在建立實例的地方：index.js加載插件：

import saveInLocal from './plugin/saveInLocal'


plugins: [saveInLocal]

插件使用思路：每次提交的時候，咱們但願將提交的數據存放在本地，那麼就須要把提交的內容存放在localStorage的state裏，由於函數中state參數是一個對象，所以要轉化成JSON字符串來存儲，而後每次刷新後咱們須要將localStorage裏的state裏的內容讀出來從新存放在store實例裏？

首先要作一個判斷：若是當前實例中的localStorage.state已經存儲了有了值，那麼咱們就須要經過store.repalceState(JSON.parse(localStorage.state))方法,將字符串轉成對象，而後替換到當前實例裏

export default store => {
  console.log('store初始化了')
  if (localStorage.state) store.replaceState(JSON.parse(localStorage.state)) // 若是當前實例中的localStorage.state已經存儲了有了值
  store.subscribe((mutation, state) => {
    console.log('提交mutation')
    localStorage.state = JSON.stringify(state) // 把提交的內容存放在localStorage的state裏，由於函數中state參數是一個對象，所以要轉化成JSON字符串來存儲
  })
}