Vue 3 & Pinia 状态管理（2） - Pinia 是什么 & 创建根存储

嗨，我是温新，一名 PHPer

本篇目标：了解什么是 Pinia

Pinia 官方文档：https://pinia.web3doc.top/introduction.html

什么是 Pinia

Pinia 是什么

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

Pinia 是一个状态管理器，存储在 pinia 存储库中的数据可以在任何组件中使用。

为什么要使用 Pinia

• mutations 不再存在，只有state，gettes，actions；
• 更加友好的 TypeScript 支持；
• 没有 modules 嵌套结构，每一个 store 都是独立且互不影响；
• 没有命名空间模块；
• 支持插件用于扩展自身功能；
• 不再需要注入、导入函数、调用函数。

Pinia的核心

state、getter、action 是 Pinia 的核心。换一种方式来理解它们就会容易的多，state 就是 属性，getter 就是 计算属性，action 就是函数。

创建根存储

创建根存储

步骤一：安装 pinia

npm i pinia

步骤二：创建根存储

// main.ts

import { createApp } from "vue";
import App from "./App.vue";

// 引入 pinia
import { createPinia } from "pinia";
// 创建 pinia 实例
const pinia = createPinia();


const app = createApp(App);
// 注册 pinia
app.use(pinia);

app.mount("#app");

pinia 根存储创建完毕，接下来就是使用。

store 创建与使用

store 是什么？简单来说就是数据仓库，一个用于存储公用数据的地方，存放在这里的数据，所有组件都可以使用，即使跨组件。

创建 store

pinia 中使用 defineStore() 方法创建一个 store，且该 store 的名称必须是唯一的。该 store 用于存放全局使用的数据。

1、在 src 目录创建 stores 文件夹，用于创建各种 store；

2、在 stores 文件夹下创建相关文件，如 user.ts，该文件用于存放与 user 相关的数据。

// src/stores/user.ts

import { defineStore } from 'pinia'
import {ref} from 'vue'

// 定义一个 user 仓库
// 第一个参数是仓库的名称，必须唯一
// 第二个参数是一个函数
export default defineStore('user', () => {
})

使用 store

<script setup lang="ts">
    // src/App.vue

    import { useUserStore } from "../src/store/user";
    const store = useUsersStore();
    console.log(store);
</script>

如何，一个 user 的数据仓库就已经定义完成，且被使用。仓库已经定义出来了，那么自然就要添加数据的。先从 state 下手，看看它是怎么玩的。