【Vue】使用 Pinia 进行状态管理
下面将展示如何在 Vue 3 项目中使用 Pinia 进行状态管理。这个示例包括多个 store，使用 getters 和 actions，以及在组件中使用这些 store。
安装 Pinia
首先，确保你已经安装了 Vue 3，然后通过 npm 或 yarn 安装 Pinia：
npm install pinia
或者
yarn add pinia
配置 Pinia
在你的 Vue 3 项目的入口文件（例如 main.js 或 main.ts）中配置 Pinia：
import { createApp } from 'vue';
import { createPinia } from 'pinia';
import App from './App.vue';
const app = createApp(App);
const pinia = createPinia();
app.use(pinia);
app.mount('#app');
创建 Stores
1. 创建用户 Store
src/stores/user.js：
import { defineStore } from 'pinia';
export const useUserStore = defineStore('user', {
state: () => ({
name: 'John Doe',
age: 30
}),
getters: {
doubleAge: (state) => state.age * 2
},
actions: {
setName(newName) {
this.name = newName;
},
incrementAge() {
this.age++;
}
}
});
2. 创建任务 Store
src/stores/task.js：
import { defineStore } from 'pinia';
export const useTaskStore = defineStore('task', {
state: () => ({
tasks: [
{ id: 1, title: 'Task 1', completed: false },
{ id: 2, title: 'Task 2', completed: true }
]
}),
getters: {
completedTasks: (state) => state.tasks.filter(task => task.completed),
pendingTasks: (state) => state.tasks.filter(task => !task.completed)
},
actions: {
addTask(task) {
this.tasks.push(task);
},
toggleTaskCompletion(taskId) {
const task = this.tasks.find(task => task.id === taskId);
if (task) {
task.completed = !task.completed;
}
}
}
});
使用 Stores
1. 在组件中使用用户 Store
src/components/UserComponent.vue：
Name: {{ name }}
Age: {{ age }}
Double Age: {{ doubleAge }}
2. 在组件中使用任务 Store
src/components/TaskComponent.vue：
Tasks
-
{{ task.title }}
Completed Tasks
- {{ task.title }}
Pending Tasks
- {{ task.title }}
完整示例
以下是一个完整的示例，展示了如何在 Vue 3 项目中使用 Pinia 和
src/components/TaskComponent.vue：
Tasks
-
{{ task.title }}
Completed Tasks
- {{ task.title }}
Pending Tasks
- {{ task.title }}
通过这些步骤，你可以在 Vue 3 项目中使用 Pinia 和