Vue3状态管理——Pinia

官网：https://pinia.vuejs.org/

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。

3. 基本使用

// 方案一：使用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();
}