Pinia全新一代状态管理工具Pinia-Vue3全家桶

自2022年2月7日前端Vue3成为默认版后，Vuex的状态管理地位受收到了Pinia 的挑战。我相信当你使用过Pinia之后，就会果断的抛弃Vuex的。因为Pinia确实太方便和简单了。

学习目标

一、Pinia 的优势和环境的安装

二、使用Pinia的方式创建一个Store

三、用简单方法改变状态数据和你需要注意的事情

四、Pinia改变状态数据的四种方式包括Actions的使用

五、Pinia种Getters的使用

六、Store的互相调用方法

七、Pinia在vue-devtools中的调试方法

---

一、Pinia的优势、环境安装

简介：Pinia是Vue生态里Vuex的代替者，一个全新Vue的状态管理库。在Vue3成为正式版以后，尤雨溪强势推荐的项目就是Pinia。那先来看看Pinia比Vuex好的地方，也就是Pinia的五大优势。

Pinia的优势

1. 可以对Vue2和Vue3做到很好的支持，也就是老项目也可以使用Pinia。
2. 抛弃了Mutations的操作，只有state、getters和actions.极大的简化了状态管理库的使用，让代码编写更加容易直观。
3. 不需要嵌套模块，符合Vue3的Composition api ，让代码更加扁平化。
4. 完整的TypeScript支持。Vue3版本的一大优势就是对TypeScript的支持，所以Pinia也做到了完整的支持。如果你对Vuex很熟悉的话，一定知道Vuex对TS的语法支持不是完整的（经常被吐槽）。
5. 代码更加简洁，可以实现很好的代码自动分割。Vue2的时代，写代码需要来回翻滚屏幕屏幕找变量，非常的麻烦，Vue3的Composition api完美了解决这个问题。 可以实现代码自动分割，pinia也同样继承了这个优点。

简单理解：Pinia的优势就是，更加简洁的语法，完美支持Vue3的Composition api 和 对TypesCcript的完美支持。这些优势和尤雨溪的强烈推荐，个人觉得很快Pinia就会完全取代Vuex，成为最适合Vue3的状态管理库。

这里说一点哦，其实pinia的开发团队，就是Vuex的开发团队。（自己挑战自己？nice）

Vue3环境安装

明白了Pinia的优势后，下一步我们就需要安装开发环境了。Pinia是Vue的状态管理库，所以需要先安装Vue的项目环境。这里需要说一下Pinia同时支持Vue2和Vue3，但这里就用最新的Vite来创建一个Vue3项目。

第一种方式：

使用Vite就需要先初始化vite，一条命令搞定

npm init vite@latest

如果是第一次安装，会提示你安装对应的 packages

Need to install the following packages:
  create-vite@latest
Ok to proceed? (y)

如果出现这句话，我们直接输入y，回车后安装对应的 packages。然后回让你输入名字，这里起名叫做 pinia-jc

输入完名字，会让你选择项目的框架。

? Select a framework: » - Use arrow-keys. Return to submit.
>   vanilla
    vue
    react
    preact
    lit
    svelte

这里按鼠标的上下键进行选择。因为Pinia是专门为Vue项目开发的，所以这里我们只能选择vue。选择vue之后回车。

? Select a variant: » - Use arrow-keys. Return to submit.
>   vue
    vue-ts

然后会让你选择是否使用 ts-vue。如果你选择使用TypeScript，就选择第二项。

这里多说一点哦，如果你自己开发项目或者是新项目，还是建议使用TypeScript。用起来会减少很多错误，也适合团队的开发。对前端职业生涯很有好处。

如果你使用了Vue3，但不使用TypeScript，这就好比你到下一站去按摩，作为一个大老爷们，却找了一个男技师。虽然也舒服了，但是总感觉差点什么，心里不得劲。所以这里我们选择 vue-ts

这步选择完成后，Vite一瞬间就初始化好了项目。按照下面的顺序，只需要三步，就可以运行起来一个Vue3的项目

Done. Now run:

  cd pinia-demo  // 进入项目文件夹
  npm install    // 安装项目依赖
  npm run dev    // 运行项目

运行成功后，会提示可以通过下面的地址进行访问。复制地址，在浏览器中输入[http://localhost:3000/](http://localhost:3000/), 就可以看到默认的项目页面了。

vite v2.7.13 dev server running at:

  > Local: http://localhost:3000/
  > Network: use `--host` to expose

  ready in 503ms.

如果可以正常访问页面，说明Vue3的项目已经安装好了、

第二种方式：我们确定要用TS那全都用最新的,我这么里项目名称 pinia-jc

npm -v查看版本输入对应命令

# npm 6.x
npm init vite@latest pinia-jc --template vue

#npm 7+, 需要额外的双横线:
npm create vite@latest pinia-jc -- --template vue-ts

# yarn
yarn create vite pinia-jc --template vue

Pinia安装

安装好Vue3的开发环境后，就可以安装Pinia状态管理库了。安装的方法依然是使用 npm 来安装

npm install pinia
# or with yarn
yarn add pinia

 二、使用Pinia的方式创建一个Store

在main.ts文件里引入Pinia

安装好Pinia后，需要作的第一件事就是在/src/main.ts里引入pinia。 这里我们直接使用import引入。

import { createPinia } from 'pinia'

引入后，通过createPinia( )方法，得到pinia的实例和挂载到Vue根实例上。以下是 main.ts 的全部代码。

import { createApp } from 'vue'
import App from './App.vue'
import { createPinia } from 'pinia'
// 创建pinia实例
const pinia = createPinia()
const app = createApp(App)
//挂载到 Vue 根实例上
app.use(pinia)
app.mount('#app')

接下来就可以在项目中进行编程了

创建store状态管理库

引入Pinia后，就可以创建状态管理库了，也就是常说的Store。直接在/src目录下，新建一个store文件夹。有了文件夹之后，再创建一个index.ts文件。

这个文件里的代码，我们一般只做三件事。

1. 定义状态容器(仓库)
2. 修改容器(仓库)中的 state
3. 仓库中的 action 的使用

明确了这四件事以后，我们来编写代码。先来定义容器,这个写法是固定的，你甚至可以在VSCode中定义一个代码片段，以后用到的时候，直接可以生成这样的代码。

import { defineStore} from 'pinia'
export const mainStore = defineStore('main',{
  state:()=>{
    return {}
  },
  getters:{},
  actions:{}
})

写完这段代码，你会感觉这个很像一个Vue的小组件，这也算是Pinia的一个优点。

• defineStore()方法的第一个参数：相当于为容器起一个名字。注意：这里的名字必须唯一，不能重复。这个是官方特别说明的一个事情。
• defineStore()方法的第二个参数：可以简单理解为一个配置对象，里边是对容器仓库的配置说明。当然这种说明是以对象的形式。
• state 属性：用来存储全局的状态的，这里边定义的，就可以是为SPA里全局的状态了。
• getters属性：用来监视或者说是计算状态的变化的，有缓存的功能。
• actions属性：对state里数据变化的业务逻辑，需求不同，编写逻辑不同。说白了就是修改state全局状态数据的。

我们在Store里定义一个State，我们这里就写 JC!。

state:()=>{
    return {
      JC: '前端-JC',
    }
  },

这时候这个JC 就是全局的状态数据，是每个页面和组件都可以通过Pinia方法读取到的。

Vue3组件读取Store数据

在\src\components里，新建一个JC.vue的组件。编写下面的代码

先引入mainStore,然后通过mainStore得到store实例，就可以在组件里调用state里的state定义的状态数据了。

写好这个组件后，到App.vue里引入，就可以使用了。当然这里我们删除自动生成的一些无用代码。

写完这些后，在VSCode或者node中打开终端，然后输入yarn dev或者npm run dev 运行Vue服务，在浏览器中输入[http://localhost:3000/](http://localhost:3000/) 查看结果。

三、Pinia改变状态数据和注意事项

我们已经会通过Pinia来创建Store状态仓库了，这里讲一下状态数据的修改和状态数据结构式你可能会踩到的一个小坑。

新建组件实现状态数据的改变

为了演示数据仓库的概念，新建一个组件。然后在一个组件里修改状态数据，看看另一个组件中的数据是否会改变。

注：这时候我们就是两个组件了，只是在一个页面中显示而已。

在\components\文件夹下新建一个文件CountButton.vue。新建完成以后。

因为这里要作的是一个可以计数的组件，所以先到\store\index.ts的state属性中，增加一个状态数据count : 0

  state: () => {
    return {
      JC: '前端-JC',
      count: 0,
    }
  },

有了这个状态数据后，再回到\components\CountButton.vue文件里，增加button和对应的业务逻辑（注意这里的业务逻辑就是修改状态数据，重点内容）

我们先写了一个按钮，点击后直接执行handleClick方法。你会发现，这种改变状态数据的方法是非常方便的，要比Vuex简洁太多了。

写好后，我们把count显示再JC.vue组件里。

\src\components\JC.vue

然后把CountButton加入到App.vue页面中。

这步后，就可以到浏览器中查看一下最终的实现效果。如果一切正常，你可以看到我们点击按钮后，两个组件的数据通过Pinia的状态管理，已经可以实现联动了。

注意别踩解构的坑

我们可以把store进行解构，然后直接template中直接这样读出数据。

这样看似简单，但通过解构的数据，只有一次作用，不是响应式数据（这就是我踩的坑了）。也就是说当你改变数据状态时，解构的状态数据不会发生变化。我们这时候再点击增加按钮，可以看到只有没结构的数据发生了变化。

于是我开始查找官方文档，显然Pinia团队也发现了这个问题，提供了storeToRefs( )方法。这个方法Pinia中，所以我们先用import引入。

import { storeToRefs } from "pinia";

有了storeToRefs( )方法后，就可以在解构的代码中，对store使用方法了。其实这时候就是把解构出来的数据作了ref 响应式代理。所以数据拥有了响应式能力。

const { JC, count } = storeToRefs(store)

这时候再到浏览器中测试一下，就一切正常了

四、Pinia改变状态数据的四种方式包括Actions的使用

接着编写的CountButton.vue 组件，我们再编写一个方法handleClickPatch( )这个方法。我们采用Pinia中的$patch的方式编写。

\scr\components\CountButtton.vue

const handleClickPatch = () => {
  store.$patch({
    count: store.count + 10,
  })
}

然后在