import Vue from 'vue'
import Vuex from 'vuex'
// 创建vuex实例
const store = new Vuex.Store({
state: {},
getters: {},
mutations: {},
actions: {}
})
// 如果存在本地数据,则覆盖vuex数据
const locals = localStorage.getItem('vuex')
if (locals) store.replaceState(JSON.parse(locals))
// 将数据存储到localStorage
store.subscribe((mutation, state) => {
localStorage.setItem('vuex', JSON.stringify(state))
})
// 导出store
export default store
实际上用插件也是大概这个逻辑,在导出store之前读取localStorage是否存在已经保存的数据,如果存在就直接通过vuex实例的replaceState这个api替换当前store的数据状态,并通过vuex实例的subscribe这个api去接收状态变更事件,将变更后的store数据同步到localStorage中。