Pinia 官网速通

前言：参考 Pinia 中文文档，在 Vue3 配合 ts 中的使用。

一：介绍

1. 什么是 Pinia

Pinia 是 Vue 的存储库，允许跨组件/页面共享状态。

1.1. 为什么要使用 Pinia？

热模块更换、保持任何现有状态、使用插件扩展 Pinia 功能、TS 支持、服务端渲染支持。

1.2. 与 Vuex 的比较

Pinia 提供更简单的 API，具有更少的规范，mutations 不再存在。提供了 Composition-API 风格的 API，与 TS 使用时有可靠的类型推断支持。

2. 开始

2.1 安装

yarn add pinia
# or
npm install pinia

在 main.ts 中注册 pinia：

// main.ts
import { createApp } from "vue";
import App from "./App.vue";
import { createPinia } from "pinia";const app = createApp(App);
const pinia = createPinia();app.use(pinia);
app.mount("#app");

2.2 什么是 Store

托管全局状态。每个组件都可以读取和写入。它有三个概念，state、getters 和 actions 等同于组件中的“数据”、“计算”和“方法”。

2.3 什么时候使用 Store

需要保存跨组件使用的相同状态。例如导航栏中显示的用户信息。

二. 核心概念

1. 定义一个 Store

使用 defineStore() 定义的，需要一个唯一名称，作为第一个参数传递，将返回的函数命名为 use...：

// @/store/demo.ts
import { defineStore } from "pinia";export const useDemoStore = defineStore("demo", {state: () => {return {name: "yq",age: 18,loves: ["book"],};},actions: {changeName() {this.name = "yqcoder";},},
});

1.1 使用 store

在组件中使用 useDemoStore 创建实例，在实例上可以直接访问 state，getter，actions 定义的属性：

<script setup lang="ts">import { useDemoStore } from "@/store/demo.ts";const demoStore = useDemoStore();console.log(demoStore.name); // 'yq'const handleChange = () => {demoStore.changeName();console.log(demoStore.name); // 'yqcoder'};
</script><template><div>{{ demoStore.name }}</div><div @click="handleChange">change name</div>
</template><style lang="scss" scoped></style>

store 是用 reavtive 包裹的对象，可以不用.value，但也不能解构：

<script setup lang="ts">import { useDemoStore } from "@/store/demo.ts";// 非响应性的const { name, changeName } = useDemoStore();console.log(name); // 'yq'const handleChange = () => {changeName();console.log(name); // 'yq'};
</script><template><div>{{ name }}</div><div @click="handleChange">change name</div>
</template><style lang="scss" scoped></style>

使用 storeToRefs() 使解构的状态变响应：

<script setup lang="ts">import { storeToRefs } from "pinia";import { useDemoStore } from "@/store/demo.ts";const demoStore = useDemoStore();const { name } = storeToRefs(demoStore);console.log(name); // yqconst handleChange = () => {demoStore.changeName();console.log(name); // yqcoder};
</script><template><div>{{ name }}</div><div @click="handleChange">change name</div>
</template><style lang="scss" scoped></style>

2. State

state 是 store 的核心部分。

import { defineStore } from "pinia";export const useDemoStore = defineStore("demo", {state: () => {return {name: "yq",age: 18,loves: ["book"],};}
});

2.1 访问 “state”

可以通过 store 实例直接访问和修改状态：

const { useDemoStore } from "@/store/demo.ts";
const demoStore = useDemoStore();demoStore.name = 'yqcoder';

2.2 重置状态

使用 $reset() 方法将状态重置为初始值：

import { useDemoStore } from "@/store/demo.ts";const demoStore = useDemoStore();
demoStore.$reset();

2.3 改变状态

使用 $patch 方法，可以同时修改多个状态：

import { useDemoStore } from "@/store/demo.ts";const demoStore = useDemoStore();
demoStore.$patch({name: "yyy",age: 22,
});

并且 $patch 也接受一个函数来批量修改状态：

import { useDemoStore } from "@/store/demo.ts";const demoStore = useDemoStore();
demoStore.$patch((state) => {state.name = "yy";state.age = 23;state.loves.push("sex");
});

2.4 替换 state

使用 $state 来替换 Store 的整个状态：

import { useDemoStore } from "@/store/demo.ts";const demoStore = useDemoStore();
demoStore.$state = {name: "yy",age: 33,loves: ["sex"],
};

3. Getters

Getter 等同于 Store 状态的计算值：

import { defineStore } from "pinia";export const useDemoStore = defineStore("demo", {state: () => {return {loves: ["book"],};},getters: {lovesL: (state) => state.loves.length,},
});

通过 this 可以访问状态和 getter，在 TS 中，使用 this 访问状态，需要声明返回类型：

import { defineStore } from "pinia";export const useDemoStore = defineStore("demo", {state: () => {return {name: "yq",loves: ["book"],};},getters: {nameL: (state) => state.name.length,lovesL(): number {return this.nameL;},},
});

3.1 将参数传递给 getter

Getters 只是 computed 属性，因此无法传递任何参数。但可以通过一个函数来接受参数：

import { defineStore } from "pinia";export const useDemoStore = defineStore("demo", {state: () => {return {age: 18,};},getters: {yearAfter: (state) => {return (yearNumber: number): number => state.age + yearNumber;},},
});

在组件中使用：

<script setup lang="ts">import { useDemoStore } from "@/store/demo.ts";const deomStore = useDemoStore();
</script><template><div><!-- 输出：28 --><span>{{ deomStore.yearAfter(10) }}</span></div>
</template><style lang="scss" scoped></style>

4. Actions

Actions 相当于组件的 methods。适合定义业务逻辑：

import { defineStore } from "pinia";export const useDemoStore = defineStore("demo", {state: () => {return {name: "yq"};},actions: {changeName() {this.name = "yqcoder";},},
});

4.1 访问其他 store

访问其他 store ，直接在内部使用它：

import { useAuthStore } from "./auth-store";export const useDemoStore = defineStore("demo", {state: () => ({// ...}),actions: {async fetchUserPreferences(preferences) {const auth = useAuthStore();if (auth.isAuthenticated) {this.preferences = await fetchPreferences();} else {throw new Error("User must be authenticated");}},},
});

5. 插件

使用 pinia.use() 将插件添加到 pinia 实例中：

import { createApp } from "vue";
import { createPinia } from "pinia";// 为安装此插件后创建的每个store添加一个名为 `secret` 的属性
// 这可能在不同的文件中
function SecretPiniaPlugin() {return { secret: "the cake is a lie" };
}const pinia = createPinia();
// 将插件提供给 pinia
pinia.use(SecretPiniaPlugin);const app = createApp(App);
app.use(pinia);
app.mount("#app");// 在另一个文件中
const store = useStore();
store.secret; // 'the cake is a lie'

5.1 介绍

Pinia 插件是一个函数，返回要添加到 store 的属性。有一个可选参 context：

export function myPiniaPlugin(context) {context.pinia; // 使用 `createPinia()` 创建的 piniacontext.app; // 使用 `createApp()` 创建的当前应用程序（仅限 Vue 3）context.store; // 插件正在扩充的 storecontext.options; // 定义存储的选项对象传递给`defineStore()`// ...
}

然后使用 pinia.use() 将此函数传递给 pinia：

pinia.use(myPiniaPlugin);

5.2 扩充 store

您可以通过简单地在插件中返回它们的对象来为每个 store 添加属性：

pinia.use(() => ({ hello: "world" }));

5.3 TS

Pinia 插件参数类型检测：

import { PiniaPluginContext } from "pinia";export function myPiniaPlugin(context: PiniaPluginContext) {// ...
}

6. 在组件外使用存储

6.1 在 main.ts 中使用 store

使用 app.use(pinia) 安装 pinia 插件后，任何 useStore() 调用都将起作用：

import { useUserStore } from "@/stores/user";
import { createApp } from "vue";
import App from "./App.vue";// ❌  失败，因为它是在创建 pinia 之前调用的
const userStore = useUserStore();const pinia = createPinia();
const app = createApp(App);
app.use(pinia);// ✅ 有效，因为 pinia 实例现在处于活动状态
const userStore = useUserStore();

6.2 在 Vue Router 中使用 store

使用 Vue Router 的导航守卫内部的 store 的例子：

import { createRouter } from "vue-router";
const router = createRouter({// ...
});// ❌ 根据导入的顺序，这将失败
const store = useStore();router.beforeEach((to, from, next) => {// 我们想在这里使用 storeif (store.isLoggedIn) next();else next("/login");
});router.beforeEach((to) => {// ✅ 这将起作用，因为路由器在之后开始导航// 路由已安装，pinia 也将安装const store = useStore();if (to.meta.requiresAuth && !store.isLoggedIn) return "/login";
});