用过pinia再也不想用vuex了
- 安装
yarn add pinia
npm install pinia
- 在main.ts中集成
const pinia = createPinia()
const app = createApp(App)
app.use(pinia)
// 核心,注入插件
经过上述步骤以及可以使用pinia
- 直接上手,采用自定义的模式使用pinia,想象一下,把vuex的所有功能(state,actions…)完全想平常写代码一样,实现,不必拘束于state,actions,mutations等属性。
import {
defineStore } from "pinia";//引入pinia,必填
export const useMyPinia = defineStore('myPinia',() => {
// myPinia,是必须的,即使唯一的标识也是连接到devtools的标识。
// useMyPinia约点俗称我们应写成usexxx
})
- 好了,至此pinia的商店已经搭建完毕,下一步在商店里实现vuex的所有功能。
import {
defineStore } from 'pinia'
import {
ref } from 'vue'
export const useMyPinia = defineStore('myPinia',() => {
let pinia = reactive({
// 我们完全可以使用响应式,就像写普通的setup函数一样。
name:'pinia商店',
fruits:'暂时没有水果'
}) // 参数pinia可以理解为vuex的state
function add(){
// 可以理解为actions,mutatios的集合,
//可以像action一样进行一些异步操作,如ajax请求。
// 可以像mutations一样修改state的状态。
pinia.fruits = 'apple'
}
return {
pinia,add // 返回值必须,就像setup一样。
}
})
- 在组件中使用他们。
<template>
<div>
<h1>{
{
myPinia.pinia.name}}</h1>
<el-button @click="myPinia.add">增加水果</el-button>
<div>{
{
myPinia.pinia.fruits}}</div>
</div>
</template>
<script lang="ts" setup>
import {
useMyPinia } from '../../../../store/js';
const myPinia = useMyPinia()
// myPinia.pinia.name结果为 pinia商店
// myPinia.pinia.fruits 结果为 暂时没有水果
</script>
-
初始效果如下
-
当我们点击按钮的时候,在add函数中
pinia.fruits = 'apple'
-
pinia的基本功能已经实现了!
在组件中直接修改state的数据
myPinia.$patch(state => { state.pinia.fruits = 'orange' })
就是这么简单,pinia中的fruits就变成orange了,打开开发者工具。
可以看到,数据直接被修改。
- 此刻已经可以用pinia完成vuex的所有功能了!
如果还想用state,actons,getters,那么pinia也提供了对应的属性。
export const useOtherPinia = defineStore('otherPinia',{
state: () => (
{
person:{
name:'小明',
age:18
}
}
),
actions:{
add(){
this.person.name = '小红'
}
},
getters:{
count: state => state.person.age * 10
}
})
- 在组件的使用方法和自定义pinia属性一模一样,这里不在赘述。