Vuex 公共状态管理持久化处理

为什么需要持久化处理？

如果不做初始化，刷新页面，vuex中代码重新执行，数据就会丢失。（把数据存储到本地）

持久化处理方法

1、安装 vuex-persistedstate 插件

• 传送门：https://juejin.cn/post/6918684399659646989
• 传送门：https://juejin.cn/post/7006890304217284638

2、手动持久化处理

• 在 app.vue 里面，页面卸载的时候，把数据存储到 session 中

mounted() {
  window.addEventListener("unload", this.saveState);
},
methods: {
  saveState() {
    sessionStorage.setItem("state", JSON.stringify(this.$store.state));
  },
},

• 创建 vuex 的时候，使用三目运算法获取数据

import Vue from 'vue'
import vuex from 'vuex'
import state from './state'
import mutations from './mutations'
import actions from './actions'
import getters from './getters'

Vue.use(vuex)

const store = new vuex.Store({
  state: sessionStorage.getItem('state') ? JSON.parse(sessionStorage.getItem('state')) : state,
  mutations,
  actions,
  getters
})

export default store

标签：持久,vuex,getters,mutations,actions,state,公共,import,Vuex
来源： https://www.cnblogs.com/DL-CODER/p/16500582.html