网站广告收费标准,wordpress每段不同图片,个人网站如何建立,网站建设技术 论坛在 Vue 3 中#xff0c;Pinia 是一个状态管理库#xff0c;旨在替代 Vuex#xff0c;提供更简单和更直观的 API。Pinia 支持 TypeScript#xff0c;且其设计更符合 Vue 3 的组合式 API。 安装 Pinia 首先#xff0c;你需要安装 Pinia和pinia-plugin-persistedstate。可以…在 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 创建 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 langts import { useCounterStore } from ./stores/counterStore; const counterStore useCounterStore(); /scripttemplateb{{ counterStore.count }}/bbr /br /br /br /divbutton clickcounterStore.increment加/button/divbr /br /br /br /divbutton clickcounterStore.decrement减/button/div /templatestyle scoped b {font-size: 50px; } /style注意store中定义的响应式数据只有数值变化后才会持久话到本地即const count ref(0);不会直接持久化需要改变这个对象的值之后才会持久化到本地。 以上这样配置默认会保存到浏览器的本地存储。