简述Vuex的数据传递流程

Vuex 的数据传递流程，简单来说就是：

组件通过 dispatch 触发 action，action 再调用 commit 去触发 mutation， mutation 修改 state 中的数据，组件再通过 state 或 getters 获取更新后的数据。

Vuex 数据传递完整流程图解：

组件 --> dispatch(action) --> commit(mutation) --> state --> 组件更新视图
                        ↓
                    可异步操作

示例流程

1. 定义 state（状态）

state: {
  count: 0
}

2. 定义 mutation（同步修改 state）

mutations: {
  increment(state) {
    state.count++
  }
}

3. 定义 action（可异步调用 mutation）

actions: {
  asyncIncrement({ commit }) {
    setTimeout(() => {
      commit('increment')
    }, 1000)
  }
}

4. 组件中使用：触发数据修改

methods: {
  add() {
    this.$store.dispatch('asyncIncrement')
  }
}

5. 组件中读取数据

computed: {
  count() {
    return this.$store.state.count
  }
}

数据传递流程总结：

步骤	动作	说明
1	dispatch('actionName')	组件发起动作（可异步）
2	action 内部调用 commit()	提交 mutation 修改数据
3	mutation(state, payload)	修改 Vuex 中的 state
4	组件从 state 或 getters 读取数据	页面更新