Vuex状态、数据持久化（vuevue3状态数据持久化）

在Vue2和Vue3中，可以使用Vuex的persist插件来实现状态的持久化。以下是Vue2和Vue3的示例代码：

Vue2示例

首先安装vuex-persistedstate插件：

npm install vuex-persistedstate

然后在Vuex的store中使用：

// store.js
import Vue from 'vue';
import Vuex from 'vuex';
import createPersistedState from 'vuex-persistedstate';
 
Vue.use(Vuex);
 
export default new Vuex.Store({
  state: {
    // ...
  },
  mutations: {
    // ...
  },
  actions: {
    // ...
  },
  plugins: [createPersistedState({
    storage: window.sessionStorage, // 或者 localStorage
  })]
});

Vue3示例

在Vue3中，首先安装pinia，它是Vue3的状态管理库：

npm install pinia

然后在main.js中设置：

import { createApp } from 'vue';
import { createPinia } from 'pinia';
import { createPersistedState } from 'pinia-plugin-persistedstate';
import App from './App.vue';
 
const app = createApp(App);
 
const pinia = createPinia();
app.use(pinia);
 
pinia.use(createPersistedState({
  storage: window.sessionStorage, // 或者 localStorage
}));
 
app.mount('#app');

在Pinia的store中使用：

// store.js
import { defineStore } from 'pinia';
 
export const useMainStore = defineStore({
  id: 'main',
  state: () => ({
    // 要持久化的状态
  }),
  // 更多的选项...
});

在组件中使用store：

<script setup>
import { useMainStore } from './store';
 
const mainStore = useMainStore();
</script>

以上代码展示了如何在Vue2和Vue3中实现状态的持久化。在Vue2中使用vuex-persistedstate插件，在Vue3中使用pinia-plugin-persistedstate插件。可以选择使用sessionStorage或localStorage作为持久化的存储介质。