本文介绍如何在Vue项目中通过修改App.vue中的公共组件数据来触发其它组件或.vue页面内的监听事件，实现组件间的通信。
业务场景重现：在App.vue里面有一个头部的公共组件，该组件包含一个输入框。当我在输入框内输入词条时，需要将这个词条传递到App.vue里的标签中的某个.vue页面，并在此页面中进行数据查询。
解决思路如下：
1. 如何获取头部的词条；
2. 当词条改变时如何触发对应的.vue页面请求数据事件；
解决方案：我选择使用vuex作为全局状态管理器，当输入框内的词条发生变化时，在store.js中更新该词条的状态。然后在相关的.vue页面里监听这个变化，并在词汇发生变动后调用相应的查询方法以获取新数据。
代码实现（部分）：
```javascript
// store.js 文件内容如下:
import Vue from vue
import Vuex from vuex
Vue.use(Vuex)
export default new Vuex.Store({
state: {
searchKeyword:
},
mutations: {
setSearchKeyword(state, keyword) {
state.searchKeyword = keyword;
}
},
})
```
通过这种方式，可以确保当用户在头部输入框中修改词条时能够实时更新并触发数据请求。
5星
