【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

        
      
          状态：{{ $store.state.isShow }}
          显示
          不显示
        
      
      
      export default {
      	methods: {
      		onClick(val){
      			this.$store.commit('localIsShow', val)
      		}
      	},
      	mounted(){
      		// 初始化的时候获取原始数据
      		this.$store.dispatch('fetchIsShow')
      	}
      }
      
      

      二、使用插件

      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};
              	}
              	
              })
            ],
          });