Pinia：深入浅出的基础篇

2023-11-13 06:14:41

Pinia：Vue.js 中现代状态管理的未来

随着应用程序的复杂性不断提高，管理状态以保持应用程序的响应性和可维护性变得至关重要。Vuex 长期以来一直是 Vue.js 中事实上的状态管理解决方案，但它并不是没有缺点。Pinia 是一种新的状态管理工具，旨在解决 Vuex 的局限性，同时提供一系列先进的功能。

了解 Pinia 的核心概念

Pinia 围绕几个核心概念构建，这些概念对于理解其工作方式至关重要：

Store： 存储特定模块或功能数据的隔离数据容器。
State： 存储在 Store 中的实际数据，响应式对象，对更改的响应触发组件重新渲染。
Getter： 从 Store 获取或计算派生数据的只读函数。
Action： 修改 Store 中 State 的函数，可以包含异步操作。
订阅： 允许开发者监听 State 更改并做出反应，例如触发副作用。

开始使用 Pinia

使用 Pinia 非常简单：

安装： 使用 npm 或 yarn 安装 Pinia。
导入： 在 Vue 组件中导入 Pinia 并安装在应用程序实例上。

实例：创建一个简单的 Pinia Store

让我们创建一个简单的 Store 来管理待办事项列表：

import { defineStore } from 'pinia'

export const useTodoListStore = defineStore('todoList', {
  state: () => ({
    todos: [],
  }),
  getters: {
    completedTodos: (state) => state.todos.filter((todo) => todo.completed),
  },
  actions: {
    addTodo(todo) {
      this.todos.push(todo)
    },
    removeTodo(todo) {
      this.todos = this.todos.filter((t) => t !== todo)
    },
  },
})