vue3 使用pinia传值

### 使用 Vue 3 和 Pinia 进行状态管理和传递值 #### 创建 Store 为了在项目中使用 Pinia，首先需要创建一个 store 来集中管理应用程序的状态。通过定义 `state`、`getters` 和 `actions` 可以实现复杂的应用逻辑。 ```javascript import { defineStore } from 'pinia'; export const useMainStore = defineStore('main', { state: () => ({ count: 0, list: [] }), getters: { doubleCount(state) { return state.count * 2; } }, actions: { increment() { this.count++; }, updateList(newItems) { this.list = newItems; } } }); ``` 此代码片段展示了如何设置基本的存储结构[^1]。 #### 初始化 Pinia 并挂载到 Vue 应用程序 为了让整个应用都能访问这个 store，在 main.js 或者 main.ts 文件里初始化并安装插件： ```javascript import { createApp } from 'vue'; import { createPinia } from 'pinia'; import App from './App.vue'; const app = createApp(App); app.use(createPinia()); app.mount('#app'); ``` 这段配置使得可以在任何组件内部轻松调用之前定义好的 store[^4]。 #### 组件间共享 State 当希望在一个组件中改变另一个地方显示的内容时，可以通过如下方式读写来自 store 的数据： ```html <template> <div> <p>Current Count is {{ counter }}</p> <button @click="increment">Increase</button> </div> </template> <script setup> import { ref, computed } from 'vue'; import { useMainStore } from '@/stores/main'; // 调整路径适配实际文件位置 const store = useMainStore(); let counter = computed(() => store.count); function increment() { store.increment(); // 修改 state 中的数据 } </script> ``` 这里展示了一个简单的按钮点击事件触发 action 更新全局状态的例子。 对于更复杂的场景比如列表更新，则可以利用 `$patch` 方法来简化操作过程: ```javascript store.$patch((state) => { state.count += 100; state.list = [1, 2, 3]; }) ``` 这允许一次性完成多个属性的同时变更而不需要分别处理每一个字段[^2]。 #### 监听 Store 更改 如果想要监听某些特定状态下发生的变动以便做出响应动作，那么可以采用 watcher 工具来做这件事儿： ```javascript watch( () => store.textContentStore.fruit, (newVal) => { console.log('newVal:', newVal); // 当 fruit 发生变化时打印新值 } ) ``` 上述例子说明了怎样监控某个具体变量的变化情况，并执行相应的回调函数[^5]。