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