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字符串来存储
  })
}