Vue3.0 全家桶 – Pinia状态管理(十四)

1. 什么是Pinia呢？

Pinia（发音为/piːnjʌ/，如英语中的“peenya”）是最接近piña（西班牙语中的菠萝）的词；Pinia开始于大概2019年，最初是作为一个实验为Vue重新设计状态管理，让它用起来像组合式API（Composition API）。  从那时到现在，最初的设计原则依然是相同的，并且目前同时兼容Vue2、Vue3，也并不要求你使用Composition API；  Pinia本质上依然是一个状态管理的库，用于跨组件、页面进行状态共享（这点和Vuex、Redux一样）；

2. Pinia和Vuex的区别

3. 如何使用Pinia？

1. 使用Pinia之前，我们需要先对其进行安装：    -- yarn add pinia    -- npm install pinia2. 创建一个pinia并且将其传递给应用程序：import { createdPinia } from "piniaconst pinia = createdPinia()3. 在main.js中导入import pinia from "./store"createApp(App).use(pinia).mount("#app")

4. 认识store

1. 什么是Store？    -- 一个 Store （如 Pinia）是一个实体，它会持有为绑定到你组件树的状态和业务逻辑，也就是保存了全局的状态；    -- 它有点像始终存在，并且每个人都可以读取和写入的组件；     -- 你可以在你的应用程序中定义任意数量的Store来管理你的状态；2. Store有三个核心概念：    -- state、getters、actions；     -- 等同于组件的data、computed、methods；    -- 一旦 store 被实例化，你就可以直接在 store 上访问 state、getters 和 actions 中定义的任何属性；

5. 定义一个Store

1. 定义一个Store：    -- 我们需要知道 Store 是使用 defineStore() 定义的，    -- 并且它需要一个唯一名称，作为第一个参数传递；export const useCounter = defineStore(" counter",{  state() {    return {      counter: 0    }    }}) 2. 这个 name，也称为 id，是必要的，Pinia 使用它来将 store 连接到 devtools。3. 返回的函数统一使用useX作为命名方案，这是约定的规范；

6. 使用定义的Store

7. 认识和定义State

1. state 是 store 的核心部分，因为store是用来帮助我们管理状态的。2. 在 Pinia 中，状态被定义为返回初始状态的函数；

8. 认识和定义Getters

9. 认识和定义Actions

10. Actions执行异步操作

二. 一 以下就是Vue3.0 + TS + Vite 项目 安装命令

1. 创建项目:npm create vite@latest my-vite-app --template vue -ts2. 安装依赖: npm install3.运行项目: npm run dev4. 安装pinia: npm install 5.  npm install pinia

二.二 安装完成后我们需要将pinia挂载到Vue应用中，也就是我们需要创建一个根存储传递给应用程序，简单来说就是创建一个存储数据的数据桶，放到应用程序中去。

// main.tsimport { createApp } from "vue";import App from "./App.vue";import { createPinia } from "pinia";const pinia = createPinia();const app = createApp(App);app.use(pinia);app.mount("#app");

二.三.创建store

store简单来说就是数据仓库的意思，我们数据都放在store里面。当然你也可以把它理解为一个公共组件，只不过该公共组件只存放数据，这些数据我们其它所有的组件都能够访问且可以修改。
我们需要使用pinia提供的defineStore()方法来创建一个store，该store用来存放我们需要全局使用的数据。
首先在项目src目录下新建store文件夹，用来存放我们创建的各种store，然后在该目录下新建user.ts文件，主要用来存放与user相关的store。

/src/store/user.tsimport { defineStore } from 'pinia'// 第一个参数是应用程序中 store 的唯一 idexport const useUsersStore = defineStore('users', {  // 其它配置项})创建store很简单，调用pinia中的defineStore函数即可，该函数接收两个参数：name：一个字符串，必传项，该store的唯一id。options：一个对象，store的配置项，比如配置store内的数据，修改数据的方法等等。我们可以定义任意数量的store，因为我们其实一个store就是一个函数，这也是pinia的好处之一，让我们的代码扁平化了，这和Vue3的实现思想是一样的

二.四.使用store

前面我们创建了一个store，说白了就是创建了一个方法，那么我们的目的肯定是使用它，假如我们要在App.vue里面使用它，该如何使用呢？

/src/App.vue

使用store很简单，直接引入我们声明的useUsersStore 方法即可，我们可以先看一下执行该方法输出的是什么：

二.五.添加state

我们都知道store是用来存放公共数据的，那么数据具体存在在哪里呢？前面我们利用defineStore函数创建了一个store，该函数第二个参数是一个options配置项，我们需要存放的数据就放在options对象中的state属性内。
假设我们往store添加一些任务基本数据，修改user.ts代码。

export const useUsersStore = defineStore("users", {  state: () => {    return {      name: "小猪课堂",      age: 25,      sex: "男",    };  },});

上段代码中我们给配置项添加了state属性，该属性就是用来存储数据的，我们往state中添加了3条数据。需要注意的是，state接收的是一个箭头函数返回的值，它不能直接接收一个对象。

二.六 操作state

我们往store存储数据的目的就是为了操作它，那么我们接下来就尝试操作state中的数据。

二.七 读取state数据

读取state数据很简单，前面我们尝试过在App.vue中打印store，那么我们添加数据后再来看看打印结果：

这个时候我们发现打印的结果里面多了几个属性，恰好就是我们添加的数据，修改App.vue，让这几个数据显示出来。

输出结果:

上段代码中我们直接通过store.age等方式获取到了store存储的值，但是大家有没有发现，这样比较繁琐，我们其实可以用解构的方式来获取值，使得代码更简洁一点。

解构代码如下：

import { useUsersStore } from "../src/store/user";const store = useUsersStore();const { name, age, sex } = store;

上段代码实现的效果与一个一个获取的效果一样，不过代码简洁了很多。

二.八 多个组件使用state

我们使用store的最重要的目的就是为了组件之间共享数据，那么接下来我们新建一个child.vue组件，在该组件内部也使用state数据。

child.vue代码如下：

child组件和app.vue组件几乎一样，就是很简单的使用了store中的数据。

实现效果:

这样我们就实现了多个组件同时使用store中的数据。

二.九. 修改state数据

如果我们想要修改store中的数据，可以直接重新赋值即可，我们在App.vue里面添加一个按钮，点击按钮修改store中的某一个数据。

代码如下：

上段代码新增了changeName 方法，改变了store中name的值，我们点击按钮，看看最终效果：

我们可以看到store中的name确实被修改了，但是页面上似乎没有变化，这说明我们的使用的name不是响应式的。

很多小伙伴可能会说那可以用监听函数啊，监听store变化，刷新页面...
其实，pinia提供了方法给我们，让我们获得的name等属性变为响应式的，我们重新修改代码。

app.vue和child.vue代码修改如下：

import { storeToRefs } from 'pinia';const store = useUsersStore();const { name, age, sex } = storeToRefs(store);我们两个组件中获取state数据的方式都改为上段代码的形式，利用pinia的storeToRefs函数，将state中的数据变为了响应式的。除此之外，我们也给child.vue也加上更改state数据的方法。child.vue代码如下：

这个时候我们再来尝试分别点击两个组件的按钮，实现效果如下：

当我们store中数据发生变化时，页面也更新了！

二.十.重置state

有时候我们修改了state数据，想要将它还原，这个时候该怎么做呢？就比如用户填写了一部分表单，突然想重置为最初始的状态。此时，我们直接调用store的$reset()方法即可，继续使用我们的例子，添加一个重置按钮。代码如下：重置store// 重置storeconst reset = () => {  store.$reset();};当我们点击重置按钮时，store中的数据会变为初始状态，页面也会更新。

二.十一 批量更改state数据

前面我们修改state的数据是都是一条一条修改的，比如store.name="张三"等等，如果我们一次性需要修改很多条数据的话，有更加简便的方法，使用store的$patch方法，修改app.vue代码，添加一个批量更改数据的方法。代码如下:批量修改数据// 批量修改数据const patchStore = () => {  store.$patch({    name: "张三",    age: 100,    sex: "女",  });};有经验的小伙伴可能发现了，我们采用这种批量更改的方式似乎代价有一点大，假如我们state中有些字段无需更改，但是按照上段代码的写法，我们必须要将state中的所有字段例举出了。为了解决该问题，pinia提供的$patch方法还可以接收一个回调函数，它的用法有点像我们的数组循环回调函数了。示例代码如下：store.$patch((state) => {  state.items.push({ name: 'shoes', quantity: 1 })  state.hasChanged = true})上段代码中我们即批量更改了state的数据，又没有将所有的state字段列举出来。

二.十一. 直接替换整个state

pinia提供了方法让我们直接替换整个state对象，使用store的$state方法。示例代码：store.$state = { counter: 666, name: '张三' }上段代码会将我们提前声明的state替换为新的对象，可能这种场景用得比较少，这里我就不展开说明了。

二.十二.getters属性

getters是defineStore参数配置项里面的另一个属性，前面我们讲了state属性。getter属性值是一个对象，该对象里面是各种各样的方法。大家可以把getter想象成Vue中的计算属性，它的作用就是返回一个新的结果，既然它和Vue中的计算属性类似，那么它肯定也是会被缓存的，就和computed一样。当然我们这里的getter就是处理state数据。

二.十三.添加getter

我们先来看一下如何定义getter吧，修改user.ts。代码如下:export const useUsersStore = defineStore("users", {  state: () => {    return {      name: "小猪课堂",      age: 25,      sex: "男",    };  },  getters: {    getAddAge: (state) => {      return state.age + 100;    },  },});上段代码中我们在配置项参数中添加了getter属性，该属性对象中定义了一个getAddAge方法，该方法会默认接收一个state参数，也就是state对象，然后该方法返回的是一个新的数据。

二.十四 使用getter

我们在store中定义了getter，那么在组件中如何使用呢？使用起来非常简单，我们修改App.vue。上段代码中我们直接在标签上使用了store.gettAddAge方法，这样可以保证响应式，其实我们state中的name等属性也可以以此种方式直接在标签上使用，也可以保持响应式。当我们点击批量修改数据按钮时，页面上的新年龄字段也会跟着变化。

二.十五. getter中调用其它getter

前面我们的getAddAge方法只是简单的使用了state方法，但是有时候我们需要在这一个getter方法中调用其它getter方法，这个时候如何调用呢？其实很简单，我们可以直接在getter方法中调用this，this指向的便是store实例，所以理所当然的能够调用到其它getter。示例代码如下：export const useUsersStore = defineStore("users", {  state: () => {    return {      name: "小猪课堂",      age: 25,      sex: "男",    };  },  getters: {    getAddAge: (state) => {      return state.age + 100;    },    getNameAndAge(): string {      return this.name + this.getAddAge; // 调用其它getter    },  },});上段代码中我们又定义了一个名为getNameAndAge的getter函数，在函数内部直接使用了this来获取state数据以及调用其它getter函数。细心的小伙伴可能会发现我们这里没有使用箭头函数的形式，这是因为我们在函数内部使用了this，箭头函数的this指向问题相信大家都知道吧！所以这里我们没有采用箭头函数的形式。那么在组件中调用的形式没什么变化，代码如下：
调用其它getter：{{ store.getNameAndAge }}

二.十六 getter传参

既然getter函数做了一些计算或者处理，那么我们很可能会需要传递参数给getter函数，但是我们前面说getter函数就相当于store的计算属性，和vue的计算属性差不多，那么我们都知道Vue中计算属性是不能直接传递参数的，所以我们这里的getter函数如果要接受参数的话，也是需要做处理的。示例代码：export const useUsersStore = defineStore("users", {  state: () => {    return {      name: "小猪课堂",      age: 25,      sex: "男",    };  },  getters: {    getAddAge: (state) => {      return (num: number) => state.age + num;    },    getNameAndAge(): string {      return this.name + this.getAddAge; // 调用其它getter    },  },});上段代码中我们getter函数getAddAge接收了一个参数num，这种写法其实有点闭包的概念在里面了，相当于我们整体返回了一个新的函数，并且将state传入了新的函数。接下来我们在组件中使用，方式很简单，代码如下： 
新年龄：{{ store.getAddAge(1100) }}

二.十七.actions属性

前面我们提到的state和getters属性都主要是数据层面的，并没有具体的业务逻辑代码，它们两个就和我们组件代码中的data数据和computed计算属性一样。那么，如果我们有业务代码的话，最好就是写在actions属性里面，该属性就和我们组件代码中的methods相似，用来放置一些处理业务逻辑的方法。actions属性值同样是一个对象，该对象里面也是存储的各种各样的方法，包括同步方法和异步方法。

二.十八.添加actions

我们可以尝试着添加一个actions方法，修改user.ts。代码如下：export const useUsersStore = defineStore("users", {  state: () => {    return {      name: "小猪课堂",      age: 25,      sex: "男",    };  },  getters: {    getAddAge: (state) => {      return (num: number) => state.age + num;    },    getNameAndAge(): string {      return this.name + this.getAddAge; // 调用其它getter    },  },  actions: {    saveName(name: string) {      this.name = name;    },  },});上段代码中我们定义了一个非常简单的actions方法，在实际场景中，该方法可以是任何逻辑，比如发送请求、存储token等等。大家把actions方法当作一个普通的方法即可，特殊之处在于该方法内部的this指向的是当前store。

二.十九.使用actions

使用actions中的方法也非常简单，比如我们在App.vue中想要调用该方法。代码如下：const saveName = () => {  store.saveName("我是小猪");};我们点击按钮，直接调用store中的actions方法即可。

三.一 总结示例代码

import { createApp } from "vue";import App from "./App.vue";import { createPinia } from "pinia";const pinia = createPinia();const app = createApp(App);app.use(pinia);app.mount("#app");

user.ts代码：

import { defineStore } from "pinia";// 第一个参数是应用程序中 store 的唯一 idexport const useUsersStore = defineStore("users", {  state: () => {    return {      name: "小猪课堂",      age: 25,      sex: "男",    };  },  getters: {    getAddAge: (state) => {      return (num: number) => state.age + num;    },    getNameAndAge(): string {      return this.name + this.getAddAge; // 调用其它getter    },  },  actions: {    saveName(name: string) {      this.name = name;    },  },});

App.vue代码：

child.vue代码：

总结:pinia的知识点很少，如果你有Vuex基础，那么学起来更是易如反掌。其实我们更应该关注的是它的函数思想，大家有没有发现我们在Vue3中的所有东西似乎都可以用一个函数来表示，pinia也是延续了这种思想。所以，大家理解这种组合式编程的思想更重要，pinia无非就是以下3个大点：stategettersactions当然，本篇文章只是讲解了基础使用部分，但是在实际工作中也能满足大部分需求了，如果还有兴趣学习`pinia`的其它特点，比如插件、订阅等等，

可以移步官网：pinia官网。