vue3 怎么把状态存到localstore里

在 Vue3 中，我们可以使用 Vuex 存储库来管理应用的状态，并将其持久化到浏览器的 localStorage 中。Vuex 是一个专门为 Vue.js 应用设计的状态管理模式，它允许你在组件之间共享状态。

以下是将 Vue3 的状态存储到 localStorage 的步骤：

1. **安装Vuex**：
首先需要安装 Vuex 和相应的插件，如 `vue-router`（如果需要管理路由状态），以及 `@vuex-persistedstate` 或者 `vue-localstorage` 来保存状态到本地。通过运行 `npm install vuex @vue/cli-plugin-vuex @vuex-persistedstate` 或者 `yarn add vuex @vue/cli-plugin-vuex @vuex-persistedstate` 安装。

2. **配置Vuex**：
在项目的 `store/index.js` 文件中创建 store 实例，同时启用 localStorage 插件。例如：

import { createStore } from 'vuex';
import createPersistedState from '@vuex-persistedstate';

const store = createStore({
  // ... 其他配置
  plugins: [createPersistedState()]
});

// 如果需要存储自定义键值对，可以在 state 中定义并导出：
export default {
  state: {
    customKey: localStorage.getItem('customKey') || ''
  },
  mutations: {
    setCustomKey(state, value) {
      localStorage.setItem('customKey', value);
      state.customKey = value;
    }
  },
  getters: {
    getCustomKey(state) {
      return state.customKey;
    }
  },
  actions: {
    saveCustomKey({ commit }, value) {
      commit('setCustomKey', value);
    }
  }
};

3. **在组件中访问和操作状态**：
在需要使用的组件中，导入 store 并通过 `this.$store` 访问和修改状态：

<template>
  <button @click="saveValue">Save Value</button>
  <p>{{ customKey }}</p>
</template>

<script setup>
import { ref, useStore } from 'vue';
import store from '@/store';

const customKeyRef = ref(store.getters.getCustomKey);

function saveValue() {
  const newKey = 'new_value';
  store.actions.saveCustomKey(newKey);
  customKeyRef.value = newKey; // 更新显示的值
}
</script>

4. **初次加载时恢复状态**：
在 App.vue 或 main.js 中，检查是否存在已保存的数据并初始化 store：

import { createApp } from 'vue';
import App from './App.vue';
import store from './store';

if (process.browser && window.localStorage.getItem('customKey')) {
  store.replaceState(JSON.parse(window.localStorage.getItem('customKey')));
}

createApp(App)
  .use(store)
  .mount('#app');