Question

Vuex的使用及组件通信方式

Answer 1

Vuex是通过全局注入store对象，来实现组件间的状态共享。在大型复杂的项目中（多级组件嵌套），需要实现一个组件更改某个数据，多个组件自动获取更改后的数据进行业务逻辑处理，这时候使用vuex比较合适。假如只是多个组件间传递数据，使用vuex未免有点大材小用，其实只用使用组件间常用的通信方法即可。

Vue组件简单常用的通信方式有以下几种：
1、父子通信：父向子传值，通过props；子向父传值通过events ($emit)；父调用子方法通过ref；provide / inject。
2、兄弟通信：bus
3、跨级嵌套通信：bus；provide / inject等。

Vuex有以下几个部分构成：
1）state
state是存储的单一状态，是存储的基本数据。

2）Getters
getters是store的计算属性，对state的加工，是派生出来的数据。就像computed计算属性一样，getter返回的值会根据它的依赖被缓存起来，且只有当它的依赖值发生改变才会被重新计算。

3）Mutations
mutations提交更改数据，使用store.commit方法更改state存储的状态。（mutations同步函数）

4）Actions
actions像一个装饰器，提交mutation，而不是直接变更状态。（actions可以包含任何异步操作）

5）Module
Module是store分割的模块，每个模块拥有自己的state、getters、mutations、actions。

const moduleA = {
state: { ... },
mutations: { ... },
actions: { ... },
getters: { ... }
}

const moduleB = {
state: { ... },
mutations: { ... },
actions: { ... }
}

const store = new Vuex.Store({
modules: {
a: moduleA,
b: moduleB
}
})

store.state.a // -> moduleA 的状态
store.state.b // -> moduleB 的状态

触发异步请求操作：
this.$store.dispatch('reqHomeData')

actions中：
async reqHomeData({ commit }) {
const result = await server.getHomeData();
commit(GET_HOME_DATA, { homeList: result })
},

mutations中：
[GET_HOME_DATA](state, { homeList }) {
state.homeList = homeList
},