Vue3 Pinia 组件间通信 - 全局状态管理指南

Vue3 中可以使用 Pinia 实现组件间的通信。Pinia 是一个状态管理库，专为 Vue3 设计，可以用于全局状态管理和组件间通信。\n\n要使用 Pinia，首先需要安装 pinia 库：\n\n\nnpm install pinia\n\n\n然后在 main.js 中创建并注册 Pinia 实例：\n\njavascript\nimport { createApp } from 'vue'\nimport { createPinia } from 'pinia'\nimport App from './App.vue'\n\nconst app = createApp(App)\nconst pinia = createPinia()\n\napp.use(pinia)\napp.mount('#app')\n\n\n接下来，在需要通信的组件中，可以使用useStore 函数创建一个 store 实例，并在组件中使用：\n\njavascript\nimport { defineComponent, ref } from 'vue'\nimport { useStore } from 'pinia'\n\nexport default defineComponent({\n setup() {\n const store = useStore()\n\n const count = ref(0)\n\n const increment = () => {\n count.value++\n }\n\n return {\n count,\n increment\n }\n }\n})\n\n\n在另一个组件中，也可以使用useStore 函数创建一个 store 实例，并在组件中使用：\n\njavascript\nimport { defineComponent } from 'vue'\nimport { useStore } from 'pinia'\n\nexport default defineComponent({\n setup() {\n const store = useStore()\n\n const doubleCount = computed(() => store.count * 2)\n\n return {\n doubleCount\n }\n }\n})\n\n\n这样，两个组件就可以通过 store 实例进行通信了。其中一个组件中的count 发生变化时，另一个组件中的doubleCount 也会相应地更新。\n\n除了使用 store 实例进行通信，Pinia 还提供了其他的 API，如 actions、getters 和 mutations 等，可以用于更复杂的通信需求。具体的使用方法可以参考 Pinia 的官方文档。