vue3,setup使用pinia

在 Vue 3 中，`setup` 函数结合了 `@vue/cli` 的 Composition API 和 `pinia` 状态管理模式，提供了一种新的、更简洁的方式来声明式地管理组件内部的状态和计算。以下是如何使用 `pinia` 在 `setup` 中进行数据管理的例子：

1. 首先安装依赖：

   npm install @vue/pinia

2. 创建一个 Pinia 库（store）：

   // pinia.js 或 src/store.js
   import { createStore } from '@vue/pinia'

   export const store = createStore({
     id: 'myStore',
     state: () => ({
       count: 0,
     }),
     getters: {
       getCount(state) {
         return state.count;
       },
     },
     actions: {
       increment(context) {
         context.commit('increment');
       },
     },
     mutations: {
       increment(state) {
         state.count++;
       },
     },
   });

3. 在 `setup` 函数中引入并使用 store：

   <!-- 组件模板部分 -->
   <template>
     <div>
       <p>Count: {{ count }}</p>
       <button @click="increment">Increment</button>
     </div>
   </template>

   // main.js 或 app.vue 或 component.vue (setup语法)
   import { setup } from 'vue';
   import { useStore } from './store'; // 将store导入到项目根目录或其他模块

   setup() {
     const myStore = useStore(store); // 获取store实例
     const count = computed(myStore.getters.getCount); // 计算属性，自动更新

     const increment = async () => {
       await myStore.actions.increment(); // 异步操作时使用actions
     };

     return {
       count,
       increment,
     };
   }

在 `setup` 中，我们使用 `useStore` 来注入 store，并通过 `getters` 接口获取读取数据，通过 `mutations` 或 `actions` 进行状态的改变。这种方式让状态管理变得清晰和模块化。