Pinia 状态管理

基本代码情况

import { defineStore } from 'pinia';
import { computed, ref } from 'vue';

// 导出的时候一般use开头
export const useCounterStore = defineStore('counter', () => {
  const count = ref(0);
  const doubleCount = computed(() => count.value * 2);
  const increment = () =>{
    count.value++;
  }

  return { count, doubleCount, increment };
});

在组件中使用

<template>
  <p>{{ count }}</p>
  <p>{{ store.doubleCount }}</p>
  <el-button @click="increment">切换store的值</el-button>
</template>
import { useCounterStore } from '@/stores/counter';

import { storeToRefs } from 'pinia';
const store = useCounterStore();
// store里无论是返回的什么类型的值如果需要结构的话都需要通过 storeToRefs 包裹一下
const { count } = storeToRefs(store);
// 方法的话则可以直接进行结构就可以使用
const { increment } = store;

在 Vue 3 中，当你定义的方法是响应式的(reactive)时，可以直接进行解构赋值，因为Vue会自动跟踪这些响应式数据的变化。而对于普通的变量，如基本数据类型或非响应式对象，Vue 3 不会自动进行响应式处理，所以需要使用storeToRefs函数来将其转换为响应式对象，从而能够被 Vue 进行追踪和更新。

如果你想在 Vue 3 中对一个普通变量进行结构解构，需要先使用 storeToRefs 函数将其转换为响应式对象，然后再进行解构赋值。这样确保了变量的变化能够被 Vue 监听到并触发相应的更新。