【Vue全家桶】Pinia状态管理

原创

已于 2023-05-30 11:38:25 修改 · 2.7k 阅读

23 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端 #javascript

于 2023-04-03 10:45:00 首次发布

【Vue全家桶】Pinia状态管理

写在前面

🤗这里是前端程序员小张！

🌻人海茫茫，感谢这一秒你看到这里。希望我的文章对你的有所帮助！

🌟愿你在未来的日子，保持热爱，奔赴山海！

一、认识Pinia

1.1 认识Pinia

Pinia开始于大概2019年，其目的是设计一个拥有 组合式 API 的 Vue 状态管理库
目前同时兼容Vue2、Vue3，也并不要求你使用Composition API
Pinia本质上依然是一个状态管理库，用于跨组件、页面进行状态共享

状态管理库是什么？

是一个保存状态和业务逻辑的实体，它会持有为绑定到你组件树的状态和业务逻辑，也就是保存了全局的状态；
它有点像一个永远存在的组件，每个组件都可以读取和写入它；
你可以在你的应用程序中定义任意数量的Store来管理你的状态；

应该在什么时候使用 Store?

一个 Store 应该包含可以在整个应用中访问的数据。这包括在许多地方使用的数据，例如显示在导航栏中的用户信息，以及需要通过页面保存的数据，例如一个非常复杂的多步骤表单。
另一方面，应该避免在 Store 中引入那些原本可以在组件中保存的本地数据，例如，一个元素在页面中的可见性。

安装：npm install pinia

在这里插入图片描述

1.2 为什么使用Pinia？

使用 Pinia，即使在小型单页应用中，你也可以获得如下功能：

Devtools 支持
- 追踪 actions、mutations 的时间线
- 在组件中展示它们所用到的 Store
- 让调试更容易的 Time travel
热更新
- 不必重载页面即可修改 Store
- 开发时可保持当前的 State
插件：可通过插件扩展 Pinia 功能
为 JS 开发者提供适当的 TypeScript 支持以及自动补全功能。
支持服务端渲染

二、 Store

Store有三个核心概念：

state、getters、actions；
等同于组件的data、computed、methods；
一旦 store 被实例化，你就可以直接在 store 上访问 state、getters 和 actions 中定义的任何属性；

2.1 定义Store

Store 是用 defineStore() 定义的

它需要一个唯一名称，作为第一个参数传递
这个名字，也被用作 id ，是必须传入的， Pinia 将用它来连接 store 和 devtools。
返回的函数统一使用useX作为命名方案，这是约定的规范
defineStore() 的第二个参数可接受两类值：Setup 函数或 Option 对象

import {
   
    defineStore } from 'pinia'

// 你可以对 `defineStore()` 的返回值进行任意命名，但最好使用 store 的名字，同时以 `use` 开头且以 `Store` 结尾。
// 第一个参数是你的应用中 Store 的唯一 ID。
export const useCounterStore = defineStore('counter', {
   
   
  // 其他配置...
})

2.2 Option对象

我们也可以传入一个带有 state、actions 与 getters 属性的 Option 对象：

我们可以认为
- state 是 store 的数据 (data)
- getters 是 store 的计算属性 (computed)
- 而 actions 则是方法 (methods)

export const useCounterStore = defineStore('counter', {
   
   
  state: () => ({
   
    count: 0 }),
  getters: {
   
   
    double: (state) => state.count * 2,
  },
  actions: {
   
   
    increment() {
   
   
      this.count++
    },
  },
}