【Vue】实现 vuex 状态持久化

Vuex是基于内存存储，存在内存里面的，刷新网页之后就没有了，不会持久化储存

一、手动存储

利用 localStorage 实现永久化存储

import Vue from "vue";
import Vuex from "vuex";

Vue.use(Vuex);
export default new Vuex.Store({
  state: {
  	isShow: false,
  },
  mutations:{
  	localIsShow(state, status) {
  	  // 改变state
      state.isShow= status;
      // 设置 Storage
      window.localStorage.isShow = JSON.stringify(isShow)
    },
    updateIsShow(state, status) {
  	  // 改变state
      state.isShow= status;
    },
  },
  actions: {
  	fetchIsShow({commit}){
  		let isShow = JSON.parse(window.localStorage.isShow);
  		commit('updateIsShow', isShow)
  	}
  },
});

• App.vue

<template>
  <div>
    状态：{{ $store.state.isShow }}
    <button @click="()=>onClick(true)">显示</button>
    <button @click="()=>onClick(false)">不显示</button>
  </div>
</template>
<script>
export default {
	methods: {
		onClick(val){
			this.$store.commit('localIsShow', val)
		}
	},
	mounted(){
		// 初始化的时候获取原始数据
		this.$store.dispatch('fetchIsShow')
	}
}
</script>

二、使用插件

vuex-persistedstate插件：它会帮我们将store里面的state映射到了本地环境中。通过提交 mutation 改变的 state，会动态的去更新local里面对应的值。

• 官方文档：vuex-persistedstate
• 按照插件：

npm install --save vuex-persistedstate

• 配置插件：main.js

import Vue from "vue";
import Vuex from "vuex";
// 1. 导入包
import createPersistedState from "vuex-persistedstate";
Vue.use(Vuex);
export default new Vuex.Store({
  state,
  mutations,
  actions,

  // 配置为 vuex 的插件
  plugins: [
    // 持久化存储的state数据
    createPersistedState({
    	// 存储方式：localStorage、sessionStorage、cookies
    	storage: window.localStorage,
    	// 存储的 key 值
    	key: 'store',
    	render(state){
    		// 要存储的数据
    		return {...state};
    	}
    	
    })
  ],
});