vuex持久化缓存不需要用插件,几行代码搞定

90 阅读1分钟
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中。