如何实现持久化存储vuex

刷新vuex的值会回归初始化, 如果在保存到vuex时, 它能自动保存到浏览器本地, 默认从浏览器本地取呢?

自己写localStorage.setItem等 需要一个个写, 很麻烦自己写localStorage.setItem等 需要一个个写, 很麻烦

这里介绍一个vuex的插件包叫做vuex-persistedstate@3.2.1版本(配合vue2使用, 默认最新版是配合vue3使用)

npm i vuex-persistedstate@3.2.1

在src/store/index.js中, 导入并配置 

import Vue from 'vue'
import Vuex from 'vuex'
import createPersistedState from 'vuex-persistedstate'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    // 1. 用来存储登录成功之后，得到的 token
    token: ''
  },
  mutations: {
    // 2. 更新 token 的 mutation 函数
    updateToken (state, newToken) {
      state.token = newToken
    }
  },
  // 配置为 vuex 的插件
  plugins: [createPersistedState()]
})

1. 这次再来重新登录, 查看浏览器调试工具vuex和浏览器本地存储位置, 是否自动同步进入

2. 刷新网页看调试工具里vuex的默认值确实从本地取出了默认值, 保证了vuex的持久化