自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的优势
- 可以对Vue2和Vue3做到很好的支持,也就是老项目也可以使用Pinia。
- 抛弃了Mutations的操作,只有state、getters和actions.极大的简化了状态管理库的使用,让代码编写更加容易直观。
- 不需要嵌套模块,符合Vue3的Composition api ,让代码更加扁平化。
- 完整的TypeScript支持。Vue3版本的一大优势就是对TypeScript的支持,所以Pinia也做到了完整的支持。如果你对Vuex很熟悉的话,一定知道Vuex对TS的语法支持不是完整的(经常被吐槽)。
- 代码更加简洁,可以实现很好的代码自动分割。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
目录下,新建一个