pinia的使用

一、安装 Pinia

1. 首先，确保你的项目已经安装了 Vue.js（版本 3.x）。如果没有，请先安装 Vue。

2. 然后使用包管理器（如 npm 或 yarn）安装 Pinia：

   • 通过 npm 安装：npm install pinia
   • 通过 yarn 安装：yarn add pinia

3. 在你的 Vue 应用中，需要将 Pinia 挂载到 Vue 实例上。在main.js（或main.ts）文件中：

   • 导入createApp（如果使用 Vue 3）和Pinia：

import { createApp } from 'vue';
import { createPinia } from 'pinia';

• 创建一个 Pinia 实例：const pinia = createPinia();
• 将 Pinia 挂载到 Vue 应用：

const app = createApp(App);
app.use(pinia);
app.mount('#app');

二、定义 Store（状态仓库）

1. 创建一个.js或.ts文件来定义你的 store。例如，userStore.js（假设是管理用户相关状态的 store）。
2. 导入defineStore函数：
   • 如果是 JavaScript 文件：import { defineStore } from 'pinia';
   • 如果是 TypeScript 文件，可能还需要一些类型定义：import { defineStore } from 'pinia';import { ref } from 'vue';
3. 使用defineStore函数来定义 store。它接受两个参数：
   • 第一个参数是 store 的唯一标识符（通常是一个字符串），例如'user'。这个标识符在整个应用中应该是唯一的，用于区分不同的 store。
   • 第二个参数是一个函数，该函数返回一个包含状态、操作等的对象。
   • 示例定义一个简单的用户 store：

export const useUserStore = defineStore('user', () => {const user = ref({name: 'John Doe',age: 30});function updateName(newName) {user.value.name = newName;}return {user,updateName};
});

• 这里定义了一个名为user的 store。它有一个user状态，初始值是一个包含name和age属性的对象。还有一个updateName操作函数，用于更新用户的名字。

三、在组件中使用 Store

1. 在 Vue 组件中使用 store，首先要导入定义好的 store。例如，在一个.vue组件文件中：
   • 导入之前定义的userStore：import { useUserStore } from '@/stores/userStore';
2. 在组件的setup函数（Vue 3）中获取 store 实例：
   • const userStore = useUserStore();
3. 读取状态：
   • 可以直接访问 store 中的状态。例如，在模板中显示用户名字：

<template><div>{{ userStore.user.name }}</div>
</template>

• 或者在setup函数中使用：

setup() {const userStore = useUserStore();console.log(userStore.user.name);return {userStore};
}

1. 调用操作（actions）：
   • 例如，当用户点击一个按钮来更新名字时，可以在组件的方法中调用 store 中的操作函数。在模板中：

<template><div><button @click="updateName('Jane Doe')">Update Name</button></div>
</template>

• 在setup函数中定义updateName方法并调用 store 的操作：

setup() {const userStore = useUserStore();function updateName(newName) {userStore.updateName(newName);}return {userStore,updateName};
}

四、状态持久化（可选）

1. 如果想在页面刷新后保留 store 中的状态，可以使用插件来实现状态持久化。例如，使用pinia-plugin-persistedstate插件。
2. 安装插件：
   • 通过 npm 安装：npm install pinia - plugin - persistedstate
   • 通过 yarn 安装：yarn add pinia - plugin - persistedstate
3. 在main.js（或main.ts）中配置插件：
   • 导入插件：import { createPinia } from 'pinia';import piniaPluginPersistedstate from 'pinia - plugin - persistedstate';
   • 创建 Pinia 实例并应用插件：

const pinia = createPinia();
pinia.use(piniaPluginPersistedstate);

1. 配置持久化选项：
   • 在定义 store 时，可以指定哪些状态需要持久化。例如：

export const useUserStore = defineStore('user', () => {const user = ref({name: 'John Doe',age: 30});function updateName(newName) {user.value.name = newName;}return {user,updateName};
},{persist: {enabled: true,strategies: [{key: 'user',storage: localStorage}]}
});

• 这里通过persist选项，将userstore 的状态持久化到本地存储（localStorage），存储的键为'user'。

这就是 Pinia 的基本使用要求，通过合理地定义 store、操作状态，并在组件中使用，可以有效地管理 Vue 应用中的状态。