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 saveLocal
localStorage和 sessionStorage 外面只能存字符串，所以如果须要存对象或者数组，须要通过 JSON.stringify 转换为字符串，获取的时候再通过 JSON.parse 转换回来