目录

搭建pinia环境

存储数据

组件中使用数据

修改数据

storeToRefs

$subscribe

---

pinia相当于vue2中的vuex，pinia也是vue.js状态管理库。

搭建pinia环境

下载

npm install pinia

创建

src/main.js

import { createApp } from 'vue'
import App from './App.vue'/* 引入createPinia，用于创建pinia */
import { createPinia } from 'pinia'/* 创建pinia */
const pinia = createPinia()
const app = createApp(App)/* 使用插件 */
app.use(pinia)
app.mount('#app')

存储数据

它有三个概念：store、getters、actions，相当于组件中的data、computed和methods。

src/store/count.js

// 引入defineStore用于创建store
import {defineStore} from 'pinia'// 定义并暴露一个store
export const useCountStore = defineStore('count',{// 动作actions:{increment(value) {this.sum += value}},// 状态state(){return {sum:6,a:1,b:2,c:3}},// 计算getters:{bigSum:(state) => state.sum *10,}
})

actions中可以通过this来获取到state中的数据，getters用于处理state中的数据。

组件中使用数据

<template><h2>state中的数据：{{ countStore.sum }}</h2><h2>getters处理的数据：{{ countStore.bigSum }}</h2><button @click="add">点击加三</button>
</template><script setup name="Count">// 引入对应的useXxxxxStore	import {useCountStore} from '@/store/count'// 调用useXxxxxStore得到对应的storeconst countStore = useCountStore()const add = () => {//调用actions中的方法countStore.increment(3)}
</script>

修改数据

（1）直接修改

countStore.sum = 666

（2）批量修改

countStore.$patch({sum:999,a:11,b:22,c:33
})

（3）通过actions修改，然后在组件中调用actions中的方法

storeToRefs

使用storeToRefs可以将store中的数据转换成ref对象。

注意：pinia中的storeToRefs只会对数据本身转换，而vue中的toRef会转换store中的数据。

我们通过解构拿到的数据不是响应式的，所以需要使用storeToRefs将它们变成响应式的。

<template><div class="count"><h2>当前求和为：{{sum}}</h2></div>
</template><script setup lang="ts" name="Count">import { useCountStore } from '@/store/count'/* 引入storeToRefs */import { storeToRefs } from 'pinia'/* 得到countStore */const countStore = useCountStore()/* 使用storeToRefs转换countStore，随后解构 */const {sum} = storeToRefs(countStore)
</script>

$subscribe

使用$subscribe方法可以侦听store中的数据变化

countStore.$subscribe((mutate,state)=>{console.log(mutate, state);
})