vue3状态管理工具 pinia的使用
pinia 是一个轻量级的状态管理库,属于 vue3 生态圈新的成员之一,也可以把它看做 vuex5,同时支持 vue2 和 vue3,模块化的设计让它的结构十分地清晰明了
安装
npm install pinia --save
引入
在 main.ts中引入
import { createApp } from 'vue'
import { createPinia } from 'pinia'//引入pinia
const app = createApp(App)
app.use(createPinia())
使用方法1
例子:在src/stores下新建一个myStore.ts文件
//myStore.ts
import { defineStore } from 'pinia'//
//使用defineStore()来定义一个 store
//注意:defineStore中的第一个参数需要在你整个应用当中保持唯一。
//myStore是定义的store的id名是唯一的
//useStore为store暴露出去供引入使用的名字
export const useStore = defineStore('myStore', {
state: () => {
return {
count: 0
}
},
getters: {
count() {
return this.count
}
},
actions: {
increment() {
this.count++
}
}
})
注意:defineStore中的第一个参数需要在你整个应用当中保持唯一
这种写法和我们之前使用的 vuex 简直一模一样,区别就是 pinia 将mutations方法取消了更方便我们使用。
使用方法2:下面是Vue3 的 setup 语法的写法 更简单方便
import { defineStore } from 'pinia'
export const useStore= defineStore('myStore', () => {
const count = ref(0)
function increment() {
count.value++
}
//返回需要暴露的属性和方法
return { count, increment }
})
页面中使用
<script lang="ts" setup>
import { useStore } from '@/stores/myStore'
const counter = useStore()
function myFun(){
//counter.count = 1//这里可以直接修改数据
//counter.$patch((state)=>{//如果state数据多可以使用$patch方法批量修改数据
//state.count = 200
//})
counter.increment()//使用定义的方法修改数据的值,可以传参数
}
</script>
<template>
<p>直接使用:{{counter.count}}</p>
<div @click="myFun">
{{ counter.count }}
</div>
</template>
最后:如果state中定义的数据有多个,可以使用storeToRefs解构赋值
const counter = useStore()
const { count } = counter//这里直接解构赋值
function myFun(){
counter.increment()
}
<div @click="myFun">{{ count }}</div> //这里可以正常显示数据,调用方法无法修改状态值
注意:使用上述直接解构赋值,数据可以正常显示但是点击myFun方法 count 的值不会变化,只会维持它的初始值不变,普通的解构是被禁止使用必须使用storeToRefs方法来实现
import { storeToRefs } from 'pinia'//引入方法storeToRefs
const counter = useStore()
const { count } = storeToRefs(counter)//这里使用storeToRefs解构赋值
function myFun(){
counter.increment()
}
<div @click="myFun">{{ count }}</div> //可以正常使用功能,调用方法可以修改状态值