标签：持久 vuex getters mutations actions state 公共 import 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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。