一.安装pinia
二选一即可
npm i pinia
####
pnpm add pinia
二.基本使用
1.在src/main.ts入口文件创建pinia实例并挂载
import { createApp } from 'vue'
import App from './App.vue'
import { createPinia } from 'pinia'
// 创建pinia实例
const pinia = createPinia()
// 挂载到根实例上
createApp(App).use(pinia).mount('#app')
2.创建store
例如：文件路径src/store/index.ts
import { defineStore } from "pinia"
// 1.定义并导出容器
// 参数1：容器的ID，必须唯一，将来Pinia会把所有的容器挂载到根容器，每个容器的名字就是这里的ID
export const useMainStore = defineStore('main', {
/**
* 类似与组件的data， 用来存储全局状态
* 1.必须是函数：这样是为了在服务端渲染的时候避免交叉请求导致的数据状态污染（客户端其实无所谓）
* 2.必须是箭头函数：为了更好的ts类型推导
* 返回值：一个函数，调用该函数即可得到容器实例
*/
state: () => {
return {
count: 100,
foo: 'bar',
arr: [1, 2, 3]
}
},
/**
* 类似于组件的computed，用来封装计算属性，有【缓存】功能
*/
getters: {
// 每个函数接受一个可选参数：state状态对象
count10(state) {
console.log('count10()调用了');// 具有缓存功能
return state.count + 10
}
// （不建议）如果不使用state而使用this，此时就不能对返回值类型做自动推导了，必须手动指定
// count10(): number {
// return this.count + 10
// }
},
/**
* 完全类比于Vue2组件中的methods（可以直接用this)，用来【封装业务逻辑】，修改state
*/
actions: {
/**
* 注意！！不能使用箭头函数！！一定要用普通函数！！！
* why？因为箭头函数this为undefined
*/
changeState(num: number) {
// 可以直接使用this，像极了Vue2
// this.count++
// this.foo = 'hello'
// this.arr.push(4)
// 对于批量修改，建议使用patch做优化
this.$patch((state) => {
state.count += num
state.foo = 'hello'
state.arr.push(4)
})
}
}
})
3.HelloWorld.vue组件使用样例
<template>
<p>{{ mainStore.count }}</p>
<p>{{ mainStore.foo }}</p>
<p>{{ mainStore.arr }}</p>
<p>{{ mainStore.count10 }}</p>
<p>{{ mainStore.count10 }}</p>
<p>{{ mainStore.count10 }}</p>
<hr />
<p>{{ count }}</p>
<p>{{ foo }}</p>
<p>
<button @click="handleChangeState">修改数据</button>
</p>
</template>
<script lang="ts" setup>
import { storeToRefs } from 'pinia'
import { useMainStore } from '../store' //引入store
// 【哪里使用写哪里】，此时要在HelloWorld组件中用，那就写这里。这很Composition API
const mainStore = useMainStore()
// 禁止！这样会丧失响应性，因为pinia在底层将state用reactive做了处理
// const { count, foo } = mainStore
// 解决方案：使用storeToRefs将结构出的数据做ref响应式代理
const { count, foo } = storeToRefs(mainStore)
const handleChangeState = () => {
// ==============数据修改的几种方式=============
// 方式一：直接修改
// mainStore.count++
// 方式二：使用 $patch(对象) 批量修改，建议使用，底层做了性能优化
// mainStore.$patch({
// count: mainStore.count + 1,
// foo: 'hello',
// arr: [...mainStore.arr, 4] // 这就不优雅了，所以有了方式三
// })
// 方式三：使用 $patch(回调函数)，这个更优雅，墙裂推荐！！！
// 回调函数中的state参数，就是Store定义时里面的state!
// mainStore.$patch((state) => {
// state.count++
// state.foo = 'hello'
// state.arr.push(4)
// })
// 方式四：逻辑较为复杂时，应封装到Store的actions中，并对外暴露接口
mainStore.changeState(10)
}
</script>
从以上几种修改store数据的方式，可以看出pinia的使用非常的简便+灵活，也非常的Composition API。推荐使用后两种方式。
最后：希望本篇文章能帮到您！
