【Pinia 状态管理篇】Vite + Vue3 组合式 API 模式下的 Store 数据处理

MagnumHou

已于 2023-07-20 09:09:21 修改

阅读量1.6k

点赞数

分类专栏： Vue Vite+Vue3 前端工程化、打包优化文章标签： vue.js Pinia 状态管理 Vuex Store

于 2023-06-15 17:26:36 首次发布

本文链接：https://blog.csdn.net/qq_39335404/article/details/131232395

版权

本文详细介绍了在Vite + Vue3环境下使用Pinia进行状态管理的方法，包括Pinia的安装、Store的创建与使用、State、Getter和Action的核心概念。相比于Vuex，Pinia提供了更直接的状态操作，减少了魔法字符串的使用，提升了开发体验。

摘要由CSDN通过智能技术生成

一、 Pinia 安装与使用

Pinia（发音为 /piːnjʌ/）是一个拥有 “组合式 API” 的 Vue 专属状态管理库，它允许跨组件或页面共享状态。

Pinia 相对比 Vuex 3.x/4.x 发生了哪些变化？

数字化管理平台
 Vue3+Vite+VueRouter+Pinia+Axios+ElementPlus
个人博客地址

mutation 已经被弃用，状态操作更直接
设计上提供一个扁平架构，“不再有可命名模块和嵌套结构模块”
API 设计上尽可能地利用 TS 类型推导
无过多的 **”魔法字符串“ 注入，只需要导入函数并调用它们，然后享受自动补全的乐趣就好

1.1 安装

# yarn 方式
yarn add pinia

# npm 方式
npm install pinia

Pinia 默认为 Vite + Vue3 组合式 API 提供量身定制的 Store 状态管理。如果 Vue 版本低于 2.7，请安装组合式 API 包：@vue/composition-api。如果你正在使用 Vue CLI，你可以试试这个非官方插件。

1.2 注册 pinia 实例到全局

# main.js
import { createApp } from 'vue'
// 引入 createPinia 函数
import { createPinia } from 'pinia'
import App from './App.vue'

// 创建 pinia 实例（根 store）
const pinia = createPinia()
// 创建应用实例
const app = createApp(App)

// 应用中使用 pinia 插件
app.use(pinia)
// 挂载根组件
app.mount('#app')

Vue2 版本还需要引入插件 PiniaPlugin。

1.3 创建一个 Store

Store（如：Pinia）是一个保存状态和业务逻辑的实体，不与组件树绑定。它承载着全局状态（整个应用中访问的数据），每个引入它的组件都可以对其进行读写操作。

Store 中有三个类似组件的概念：state（data）、getter（computed）、action（methods）。

需要注意的是，并不是所有的数据都要放到 Store 中处理，像购物车、用户登录状态等这些需要快速处理跨组件之间的状态，使用 Store 更加便捷；而像控制元素是否可见这种组件内状态，则不需要 Store 了。

举例描述 Store 管理用户登录状态的过程：

当用户登录时，我们可以在状态管理中记录该用户的信息，以便在后续的用户操作中使用。如果用户在网站上注销，则可以清除该用户的状态。通过使用Pinia，开发人员可以轻松地管理用户的登录状态，并在整个应用程序中验证用户身份。

创建 Store 代码示例（如果没有基础，可以跳过这里）：

# src/stores/store-demo.js
import { defineStore } from 'pinia'

const filters = {
    FINISHED: 'finished',
    UNFINISHED: 'unfinished'
}

export const useTodosStore = defineStore('todos', {
    state: () => ({
        // @type {
  {id: number, text: string,isFinished: boolean}[]}
        todos: [],
        // @type {'all' | 'finished' | 'unfinished'}
        filter: 'all',
        // 类型将自动推断为 number
        id: 0
    }),
    getters: {
        // 过滤列表中自动补全的数据
        finishedTodos(state) {
            return state.todos.filter(todo => todo.isFinished)
        },