1. 插件
对于跨组件的传值，应用vuex很不便，然而当刷新浏览器的时候，写在state里的值又都会复原到初始化状态，所以须要浏览器长期贮存的值，咱们可能会用localStorage或者sessionStorage来存储，如果是这样的话，我的项目里，除了用vuex还用localStorage等，采纳多种形式治理我的项目里须要跨组件传递的值，显得有些凌乱，
这里来讲一下利用vuex里的插件概念实现长久化存储
新建src/store/plugin/saveLocal.js文件：
const saveLocal = store => { // 当浏览器刷新的时候执行，也就是store初始化的时候执行 // 当刷新浏览器时，第一次做的操作就写在这里 console.log('store初始化') //store.subscribe办法，只有我的项目里有提交mutation的动作都会触发一次这个办法 store.subscribe((mutation, state) => { console.log('提交了mutation') })}export default saveLocal在src/store/index.js外面引入这个插件
import Vue from 'vue'import Vuex from 'vuex'import state from './state'import getters from './getter'import mutations from './mutations'import actions from './actions'import user from './module/user'import saveLocal from './plugin/saveLocal'Vue.use(Vuex)export default new Vuex.Store({ state, mutations, actions, getters, modules: { user }, plugins: [saveLocal]})以下办法就能够将store里的值，全副保留到localStorage，每次刷新的时候只须要从localStorage取值就行了
const saveLocal = store => { // 当浏览器刷新的时候执行，也就是store初始化的时候执行 // 当刷新浏览器时，第一次做的操作就写在这里 console.log('store初始化') if (localStorage.store) { store.replaceState(JSON.parse(localStorage.state)) } // store.subscribe办法，只有我的项目里有提交mutation的动作都会触发一次这个办法 store.subscribe((mutation, state) => { console.log('提交了mutation') localStorage.state = JSON.stringify(state) })}export default saveLocal如果只是让某一个值不刷新扭转，能够这样做：
退出让src/store/state.js外面定义的menuType永恒保留，就能够在saveLocal.js里实现：
const saveLocal = store => { if (localStorage.menuType) { store.state.menuType = localStorage.menuType } store.subscribe((mutation, state) => { localStorage.menuType = state.menuType })}export default saveLocal值也能够存到sessionStorage外面：
const saveLocal = store => { if (sessionStorage.menuType) { store.state.menuType = sessionStorage.menuType } store.subscribe((mutation, state) => { sessionStorage.menuType = state.menuType })}export default saveLocallocalStorage和sessionStorage外面只能存字符串，所以如果须要存对象或者数组，须要通过JSON.stringify转换为字符串，获取的时候再通过JSON.parse转换回来