Pinia 是 Vue 的存储库,它允许您跨组件/页面共享状态。在 Vue 3 中使用 Pinia,你可以按照以下步骤进行操作:
安装 Pinia:在你的 Vue 3 项目中,通过 npm 或 yarn 安装 Pinia
npm install pinia
创建 Pinia 存储:在你的项目中创建一个 Pinia 存储,该存储将包含你的应用程序状态和相关逻辑
// store.js
import { createPinia } from 'pinia';
const pinia = createPinia();
export default pinia;
注册 Pinia 存储:在你的应用程序入口文件(通常是 main.js
)中注册 Pinia 存储
import { createApp } from 'vue';
import pinia from './store';
import App from './App.vue';
const app = createApp(App);
app.use(pinia);
app.mount('#app');
创建和使用 Pinia 模块:在 store.js
文件中,你可以创建和导出一个 Pinia 模块
// store.js
import { defineStore } from 'pinia';
export const useCounterStore = defineStore('counter', {
state: () => ({
count: 0,
}),
actions: {
increment() {
this.count++;
},
decrement() {
this.count--;
},
},
});
在组件中使用 Pinia 模块:在你的 Vue 3 组件中,可以使用 useStore
函数来获取 Pinia 模块的实例
<template>
<div>
<p>Count: {
{ count }}</p>
<button @click="increment">Increment</button>
<button @click="decrement">Decrement</button>
</div>
</template>
<script>
import { useCounterStore } from './store';
export default {
setup() {
const counterStore = useCounterStore();
return {
count: counterStore.count,
increment: counterStore.increment,
decrement: counterStore.decrement,
};
},
};
</script>
在上述示例中,我们首先导入 useCounterStore
函数来获取一个 CounterStore 的实例。然后,我们在组件的 setup
钩子函数中使用该实例的属性和方法。
这样,你就可以在 Vue 3 中使用 Pinia 来管理应用程序的状态了。你可以创建多个 Pinia 模块来管理不同的状态,并在组件中使用这些模块。