Vuex 接口调用的三个阶段：剥丝抽茧之妙

前言

在最近的一个 IoT 智能设备联动场景项目中，Vuex 再次展现了其在复杂 Vue 应用中不可替代的作用。本文将根据本人在该项目中的实践经验，深入剖析 Vuex 调用接口的三个阶段，带领读者领略 Vuex 的真谛。

阶段一：发起请求

1. 创建动作

动作负责异步操作，在 Vuex 中，我们通过 actions 对象定义动作。例如：

actions: {
  async fetchUsers() {
    const res = await api.getUsers()
    commit('setUsers', res.data)
  }
}

2. 绑定动作到组件

在组件中，可以使用 this.$store.dispatch() 方法调用动作。例如：

<template>
  <button @click="fetchUsers">获取用户</button>
</template>

<script>
export default {
  methods: {
    fetchUsers() {
      this.$store.dispatch('fetchUsers')
    }
  }
}
</script>

阶段二：处理响应

1. 提交变异

变异负责修改状态，在 Vuex 中，我们通过 mutations 对象定义变异。例如：

mutations: {
  setUsers(state, payload) {
    state.users = payload
  }
}

2. 在动作中调用变异

在动作中，使用 commit 方法提交变异，传递要修改的状态和 payload。例如：

actions: {
  async fetchUsers() {
    const res = await api.getUsers()
    commit('setUsers', res.data)
  }
}

阶段三：获取状态

1. 在组件中访问状态

组件可以通过 this.$store.state 访问状态。例如：

<template>
  <ul>
    <li v-for="user in $store.state.users" :key="user.id">{{ user.name }}</li>
  </ul>
</template>

2. 响应状态变化

组件可以通过 watch 监听状态变化，并作出相应反应。例如：

<script>
export default {
  watch: {
    '$store.state.users'(newVal, oldVal) {
      // 当 users 状态改变时执行
    }
  }
}
</script>

结语

通过理解 Vuex 调用接口的三个阶段，我们可以更深入地掌握 Vuex 的工作原理，为构建更强大、更灵活的 Vue 应用奠定坚实的基础。如果您有任何疑问或想法，欢迎随时与我联系。