在 Vue 3 中，Pinia 是一个状态管理库，旨在替代 Vuex，提供更简单和更直观的 API。Pinia 支持 TypeScript，且其设计更符合 Vue 3 的组合式 API。

安装 Pinia

首先，你需要安装 Pinia和pinia-plugin-persistedstate。可以使用 npm 或 yarn：

npm install pinia
# 或者
yarn add pinianpm install pinia-plugin-persistedstate
或
yarn add pinia-plugin-persistedstate

在 Vue 3 中使用 Pinia

1. 创建 Pinia 实例

在你的主入口文件（通常是 main.js 或 main.ts）中，创建 Pinia 实例并将其添加到 Vue 应用中：

// main.js
import { createApp } from 'vue';
import { createPinia } from 'pinia';
import piniaPluginPersistedstate from 'pinia-plugin-persistedstate';
import App from './App.vue';const app = createApp(App);
const pinia = createPinia();// 使用持久化插件
pinia.use(piniaPluginPersistedstate);app.use(pinia);
app.mount('#app');

2.创建 Store并持有化

你可以在 src/stores 目录下创建一个 store 文件，例如 counterStore.js：

// stores/counter.js
import { defineStore } from 'pinia';
import { ref,watch} from 'vue';export const useCounterStore = defineStore('counter', () => {const count = ref(0);// 监听 count 的变化，方便调试watch(count, (newValue) => {console.log('Count changed:', newValue);});function increment() {count.value++;}function decrement() {count.value--;}return {count,increment,decrement,};
}, {persist: true, // 启用持久化
});

2. APP.vue在组件中使用 Store

在组件中，你可以直接调用这些方法：

<script setup lang="ts">
import { useCounterStore } from "./stores/counterStore";
const counterStore = useCounterStore();
</script><template><b>{{ counterStore.count }}</b><br /><br /><br /><br /><div><button @click="counterStore.increment">加</button></div><br /><br /><br /><br /><div><button @click="counterStore.decrement">减</button></div>
</template><style scoped>
b {font-size: 50px;
}
</style>

注意：store中定义的响应式数据，只有数值变化后，才会持久话到本地，即（const count = ref(0);）不会直接持久化，需要改变这个对象的值之后，才会持久化到本地。

以上这样配置，默认会保存到浏览器的本地存储。