vuex数据持久化解决方案

一.vuex数据为什么要持久化？

 因为vuex是基于内存，存在内存中的，当网页刷新之后就没有了，不会持久化储存

二.vuex持久化实现方案

1. 使用 vuex-persistedstate

<1> 安装一个vuex的插件 vuex-persistedstate 来支持vuex的状态持久化

npm i vuex-persistedstate -S

注意: 该插件应是生产依赖包, 所以要 -S
在package.json中

<2> 配置store
在src/store 文件夹下新建 index.js文件

import Vue from 'vue';
import Vuex from 'vuex';
import createPersistedState from 'vuex-persistedstate'
Vue.use(Vuex);
const config = {
    state: {
        isLogin: false,
    },
    getters: {
        
    },
    mutations: {
    
    },
    actions: {
	},
	modules: {
	    dict
	},
	plugins: [
	   createPersistedstate()
	],
}

const store = new Vuex.Store(config);
export default store;

<3> 在main.js中引入

import Vue from "vue";
import App from "./App.vue";
import router from "./router/index";
import store from "./store/index";
Vue.config.productionTip = false;
new Vue({
  store,
  router,
  render: h => h(App)
}).$mount("#app");

2. 利用localStorage或sessionStorage

<1>新建一个vuexPersist.js文件（其实就是方案一插件的封装）

// 从本地存储中获取数据
function getState(key) {
  try {
    const serializedState = localStorage.getItem(key);
    if (serializedState === null) {
      return undefined;
    }
    return JSON.parse(serializedState);
  } catch (err) {
    console.error('Error loading state from localStorage:', err);
    return undefined;
  }
}

// 将数据保存到本地存储中
function saveState(key, state) {
  try {
    const serializedState = JSON.stringify(state);
    localStorage.setItem(key, serializedState);
  } catch (err) {
    console.error('Error geting state to localStorage:', err);
  }
}

// Vuex 数据持久化插件
export function createPersistedState(key) {
  return (store) => {
    // 初始化时从本地存储中加载状态
    const savedState = getState(key);
    if (savedState) {
      store.replaceState(savedState);
    }

    // 监听 Vuex state 的变化并保存到本地存储中
    store.subscribe((mutation, state) => {
      saveState(key, state);
    });
  };
}

<2>在store/index.js文件中引入

import Vue from "vue";
import Vuex from "vuex";
import { createPersistedState } from './vuexPersist'; 
Vue.use(Vuex);

export default new Vuex.Store({
  state: {
	 name: '张三' 
  },
  getters: {},
  mutations: {
	  updateName (state, payload) {
	    state.name = payload;
	  },
  },
  actions: {},
  modules: {},
  plugins: [
      createPersistedState('storageData')   
  ]
});

<3>测试效果

<template>
  <div class="about">
    <h1>{{ name }}</h1>
	
	<span @click="changeName">change</span>
  </div>
</template>


<script>
import { mapState } from "vuex"

export default{
	data(){
		return{
			
		}
	},
	computed:{
		...mapState(['name'])
	},
	methods:{
		
		changeName(){
		   this.$store.commit('updateName', { name: '李四', age: 24, sex:'男'})	
		}
	}
}	
</script>

其他方案
使用后端 API：如果你的应用程序需要持久化的数据与后端服务器进行交互，你可以在 Vuex 的 store 中添加异步操作，将数据发送到后端 API 进行存储。当应用程序初始化时，你可以从后端 API 获取数据并更新 Vuex 的状态。

使用 IndexedDB：IndexedDB 是浏览器提供的一种高级本地数据库解决方案。你可以使用 IndexedDB 来存储和检索 Vuex 数据。你可以在 Vuex 的 store 中编写适用于 IndexedDB 的逻辑，并在应用程序初始化时从 IndexedDB 加载数据。