vue3状态管理工具 pinia的使用

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> //可以正常使用功能，调用方法可以修改状态值