0.初始化配置
// 创建项目
yarn create vite
// 安装pinia
npm install pinia
1.创建 Pinia 实例并挂载
// src/main.js
import { createPinia } from 'pinia';
// 创建 Pinia 实例
const pinia = createPinia();
// 挂载到Vue根实例
createApp(App).use(pinia).mount('#app');
2.定义Store
// stores/counter.js
import { defineStore } from 'pinia'
export const useCounterStore = defineStore('counter', {
state: () => ({ count: 0, name: 'Eduardo' }),
getters: {
// 使用箭头函数
doubleCount: (state) => state.count * 2,
// 如果使用普通函数,不接收state也可以使用this
doubleCount1(){
return this.count * 2
},
},
actions: {
// 不能使用箭头函数定义，因为使用箭头函数会导致 this 指向错误
increment() {
this.count++
// this.$patch({}) // 批量更新
// this.$patch((state) => {});
},
},
})
参数解析：
- 参数1：是整个应用中store的唯一名称(id)
- 参数2：Store中的选项可以传递一个带有state、actions和getters属性的选项对象。
- state就类似于组件的 data ，用来存储全局状态的；getters就类似于组件的 computed，用来封装计算属性，有缓存功能；actions类似于组件的 methods，用来封装业务逻辑，修改 state。
- 基本使用
// 方案一：使用Store
import { useMainStore } from '../store';
setup(){
const mainStore = useMainStore();
console.log(mainStore.count); // 获取到Store中的count
}
// 方案二：ES6解构数据
import { storeToRefs } from 'pinia'
setup(){
const mainStore = useMainStore();
const { count } = storeToRefs(mainStore);
return { count }
}
说明：Pinia 其实把 state 数据都做了 reactive 处理了。
发现问题：ES6解构出来的数据是有问题的，已经丢失了响应式，也就是一次性的，之后对数据的修改Vue是无法监测到数据变化的。
解决办法：使用Pinia为我们提供的storeToRefs()API，这就类似Vue3中的toRefs()。
4.状态更新和Actions
const handleChangeState = () =>{
// (1)直接修改
mainStore.count++;
// (2)修改多个数据，建议使用 $patch批量更新
mainStore.$patch({
count: mainStore.count + 1
});
// (3)批量更新：$patch传递一个函数
mainStore.$patch((state) => {
state.count++;
});
// (4)逻辑比较多，封装到 actions 里
mainStore.increment();
}
