1、Vue 3 Pinia 使用实录：什么是 Pinia

作者: 温新

图书: 【Vue 3 Pinia 使用实录】

阅读: 468

时间: 2024-11-23 07:12:48

嗨，我是温新

文档：https://pinia.vuejs.org/zh/

关于 Pinia，我之前写过相关系列文章，关于用法，之前的那个系列写的已经很详细了。本着后期便于统计成册的想法，还是进行一个简单的重写。

本系列与之前的系列还有一个区别，本系列会使用 Pinia 写一个简单的存储案例。

当然啦，本篇文章的末尾，会写出之前的连接，便于查看。

什么是 Pinia

Pinia 是 Vue.js 应用程序的一个现代化的状态管理库，它用于集中管理和共享组件之间的数据，state、getter、和 action 是构建状态管理的核心概念，它们分别对应数据存储、计算属性和操作方法。

以“家庭聚会”作为案例，“聚会计划”就可以看作是一个Pinia存储，其中包含了各种状态信息，比如嘉宾名单（state）、已确认出席人数（getter）、发送邀请邮件的操作（action）等。家庭成员们（组件）无论在哪个房间准备聚会事宜，都能访问和更新这个“聚会计划”，确保每个人都能获取到最新的聚会信息，协同工作无误。

Pinia 核心概念

State（状态）

概念：state 用于存储应用的状态数据，是整个 PInia 存储的核心部分，类似于 Vue 组件中的 data。State 必须是一个函数，返回一个对象或者原始值来初始化状态。

用途：保存应用中需要跨组件共享的数据，如用户信息、购物车数据等。

案例：

export const useUserStore = defineStore('user', {
  state: () => ({
    userInfo: { name: '王美丽', age: 19 },=,
  }),
});

Getter（获取器）

概念：getter 类似于 Vue 组件中的 computed 属性，是基于 state 的衍生数据，用于计算或处理状态以得到新的值。Getter 是纯函数，不会改变状态，只依赖于状态进行计算。

用途：对state进行复杂的计算或筛选，提供者组件使用。如，从用户列表中筛选出在线用户，或计算购物车总金额等。

案例：

export const useUserStore = defineStore('user', {
  // ... state 定义 ...
  getters: {
    fullName: (state) => `${state.userInfo.name} ${state.userInfo.lastName}`,
  },
});

Action（动作）

概念：action 是执行更改状态逻辑的方法，支持同步或异步操作。在 Pinia 中，直接修改状态的操作通常放在 action 中。

用途：封装状态变更的业务逻辑，可以包含复杂的异步操作，如 API 调用。

案例：

export const useUserStore = defineStore('user', {
  // ... state 和 getters 定义 ...
  actions: {
    async login(email, password) {
      try {
        const response = await authService.login(email, password);
        this.userInfo = response.data.user;
        this.isLoggedIn = true;
      } catch (error) {
        console.error('Login failed:', error);
      }
    },
  },
});

番外篇：忆往昔

请登录后再评论