官方站点：pinia.vuejs.org/
为什么学习pinia，因为pinia对vue3的支持远比vuex更让人舒服。
*vue2 使用vuex3 而vue3需要vuex4 并且支持并不友好
*pinia对于TS的支持比较友好
*pinia相对于vuex更简单，去掉了mutation
1、安装
yarn add pinia
# or with npm
npm install pinia
2、创建pinia
const pinia = createPinia()
3、挂载
const app = createApp(App)
app.use(pinia)
4、使用
import { defineStore } from "pinia";
// 1、定义容器
// 参数1：容器ID，必须唯一，将来Pinia会把所以的容器挂载到根容器
// 参数2： 选项对象
export const useMainStore = defineStore('main', {
/**
* 类似于组件的data，用于存储全局状态的
* 1、必须是函数：这样是为了在服务端渲染的时候避免交叉请求导致的数据状态污染
* 2、必须是箭头函数，这是为了更好的TS类型推导
*/
state: () => {
return {
count: 1000,
sum: 122
}
},
/**
* 类似于组件的computed,用于封装计算属性，有缓存的功能
*
*/
getters: {
// 函数接受一个可选参数：state状态对象
// 如果getters中使用了this则必须手动指定返回值的类型，否则类型推导不出来
count1(state): number {
console.log(state.count);
return state.count + 10
}
},
/**
* 类似于组件的methods，封装业务逻辑，修改state
*/
actions: {
// 注意：不能使用箭头函数定义 action
changeState( num : number) {
this.count += num;
}
}
})
const mainState = useMainStore();
// 直接解构会失去响应性
// const { count } = mainState;
// 使用 storeToRefs 解决上面的问题
const { count, sum} = storeToRefs(mainState);
const changeState = () => {
// mainState.count++;
// 如果需要修改多个数据，建议使用$patch批量更新
// mainState.$patch({
// count: mainState.count + 1,
// sum: mainState.sum + 2
// })
// mainState.$patch(state => {
// state.count++
// state.sum += 2
// })
}
代码内容是学习B站Pinia视频时敲的
