vue3组件常用的通信方式 Pinia

Pinia 是一个用于 Vue.js 3 应用程序的状态管理库，它提供了一种简单、轻量级的方式来管理应用程序的状态，并且支持在组件之间进行通信。在 Pinia 中，你可以通过创建全局的 store 对象来管理状态，并在组件中通过注入 store 对象来访问和修改状态，从而实现组件之间的通信。

以下是使用 Pinia 进行组件通信的基本步骤：

1. 安装 Pinia： 首先，在你的 Vue.js 3 项目中安装 Pinia 库。

   npm install pinia
   

2. 创建和配置 Pinia store： 创建全局的 Pinia store 对象，用于管理应用程序的状态。你可以在项目的主入口文件（如 main.js 或 App.vue）中进行配置。

   import { createPinia } from 'pinia';
   import { createApp } from 'vue';
   import App from './App.vue';
   
   const app = createApp(App);
   const pinia = createPinia();
   
   app.use(pinia);
   app.mount('#app');
   

3. 定义和使用 store： 在你的应用程序中定义需要共享的状态，并在需要访问这些状态的组件中注入对应的 store 对象。

   // 在 store.js 中定义 Pinia store
   import { defineStore } from 'pinia';
   
   export const useCounterStore = defineStore({
     id: 'counter',
     state: () => ({
       count: 0,
     }),
     actions: {
       increment() {
         this.count++;
       },
       decrement() {
         this.count--;
       },
     },
   });
   
   // 在组件中使用 store
   <template>
     <div>
       <p>Count: {{ count }}</p>
       <button @click="increment">Increment</button>
       <button @click="decrement">Decrement</button>
     </div>
   </template>
   
   <script>
   import { useCounterStore } from './store';
   
   export default {
     setup() {
       const counterStore = useCounterStore();
   
       return {
         count: counterStore.count,
         increment: counterStore.increment,
         decrement: counterStore.decrement,
       };
     },
   };
   </script>
   

   在这个示例中，我们创建了一个名为 counter 的 Pinia store，其中包含一个名为 count 的状态和两个用于增减 count 的 action。然后在组件中使用 useCounterStore 函数来获取 counter store 的实例，并通过 setup 函数将状态和 action 注入到组件中，从而实现了组件与 store 的通信。

4. 通过 Pinia，你可以方便地管理应用程序的状态，并且在组件之间进行状态共享和通信。