建议大家结合上一篇文章学习:vite+vue script setup语法糖写法:style'me的个人博客
1、pinia是什么?
- Pinia是一个围绕Vue 3 Composition API的封装器,Pinia 是一个用于 Vue 的状态管理库,类似 Vuex, 是 Vue 的另一种状态管理方案,Pinia 支持 Vue2 和 Vue3。官网地址: Pinia
2、pinia的优点?
符合直觉,易于学习
极轻, 仅有 1 KB
模块化设计,便于拆分状态
3、安装pinia
npm install pinia
yarn add pinia
4、基本使用
首先我们需要再main.js或者main.ts中引入pinia提供的createPinia方法并使用它,代码如下:
//main.js
import { createApp } from "vue"
import App from "@/App.vue"
import {createPinia} from "pinia"
const app = createApp(App)
app.use(createPinia())
app.mount("#app")
5、状态管理---(pinia没有mutations)
pinia是没有mutations的,这点跟vuex不一样,在pinia中actions是既支持同步也支持异步的,其他类似于vuex,它核心的概念就是来管理公用数据或者状态,所有他必然也有state,如何定义呢,首先我们要引入pinia提供的defineStore方法(看到defineStore这种定义的方法,是不是感觉有vue3那味道了),用来创建一个store,defineStore接收两个参数,第一个参数是id(必须唯一),第二个参数是一个对象,对象下声明state等,代码如下:
//src/store/index.js
import {defineStore} from "pinia"
//值得注意的是:state必须是一个箭头函数
export const useMainStore = defineStore("main",{
state: ()=>{
count:0
},
actions:{
countfn(n){
this.count+=n
}
},
getters:{
doble:(state)=>state.count+10
}
})
更值得注意的是上面的代码,在actions中直接可以使用this访问到state中定义的变量(是不是跟vue2中选项式api的操作类似呢,其实actions就类似于vue2选项式methos方法),在actions下定义方法来改变state的时候,这个函数建议不要使用箭头函数,而getters则类似于vue2中的computed计算属性,这样说是不是更好理解了
6、组件中如何使用
在组件中使用,只需要引入刚才export的store名字,即可通过名字去访问,代码如下,一看便懂:
//直接通过$store.count可以直接访问到,是不是很方便
<template>
<p>pinia初始数据-pinia下一代vue状态管理</p>
<el-button>{{$store.count}}</el-button>
</template>
<script setup>
import {useMainStore} from "@/store/index"
const $store = useMainStore()
</script>
改变数据就变得更简单了,比如我们现在给button加一个事件,来让它每次都+1,代码如下:
<template>
<p>pinia初始数据-pinia下一代vue状态管理</p>
<el-button @click="handleChange">{{$store.count}}</el-button>
</template>
<script setup>
import {useMainStore} from "@/store/index"
const $store = useMainStore()
const handleChange = () =>{
// 第一种
// $store.count++
// 第二种
// $store.countfn(10)
// 第三种
// $store.$patch({
// count:$store.count+1
// })
// 第四种
$store.$patch(state=>{
state.count++
})
}
</script>
总共有这几种修改state的方式
第一种就是最简单直接的,使用$store.count++直接改变
第二种是使用actions中定义的countfn函数来修改,countfn函数可以接收n个参数
第三种是 $store.$patch接收一个对象,需要修改的对象通过$store.count重新给count赋值,但是这种方式有一点就是数据过多的话,或者数据类型比较复杂的时候就不起作用,毕竟它是重新赋值,并不能直接操作,比如说state下如果有数据,那就不能使用push等方法
第四种就是$store.$patch接收一个state函数,这就补齐了第三种的缺陷,可以直接使用state.count做改变,push也可以正常使用,这种方式直接接收了之前定义的state,都是缓存后的原类型数据,想修改哪个直接修改就行
这四种方式都是修改state的方法,具体我们需要看使用场景来选择使用哪种方法,但我个人建议使用第四种。
7、getters的使用
上面我们说了,getters就类似于vue2x中的computed计算属性,getters每次都会缓存上一次的计算,使用方法如下:
<template>
<p>pinia初始数据-pinia下一代vue状态管理</p>
<el-button @click="handleChange">{{$store.count}}</el-button>
<p>{{$store.doble}}</p>
</template>
跟state一样,直接使用$store.doble就可以,注意我们在getters下定义doble的时候,它是一个方法,但是我们使用它的时候是不需要加()的,大家应该能发现,这是一个retnun函数,如果换成这样写应该能一下就明白了:
getters:{
doble(state){
return state.count+10
}
}
getters下的方法接收state参数
8、总结
Pinia 相比 Vuex 更加简单,而且 Pinia 可以自由扩展,官方文档api:Plugins | Pinia
Pinia 是符合直觉的状态管理方式,让使用者回到了模块导入导出的原始状态,使状态的来源更加清晰可见
Pinia 的使用感受类似于RecoilRecoil,但没有那么多的概念和 API,主体非常精简,极易上手(Recoil 是 Facebook 官方出品的用于 React 状态管理库,使用 React Hooks 管理状态)
Pinia 2 目前还在 Beta 状态,不建议在生产环境中使用,不过相信稳定了以后会成为 Vue 生态中另一大状态管理方案