vuex中setter监听api调用

在 Vuex 中，我们可以在 mutations 中监听 API 调用，以实现在数据请求完成后更新 state 中的数据。

例如，假设我们有一个 API `/api/getData`，用来获取数据，我们可以在 mutations 中定义一个方法来监听这个 API 的调用，如下所示：

const store = new Vuex.Store({
  state: {
    data: null,
    loading: false
  },
  mutations: {
    setData(state, payload) {
      state.data = payload;
      state.loading = false;
    },
    setLoading(state, payload) {
      state.loading = payload;
    }
  },
  actions: {
    fetchData({ commit }) {
      commit('setLoading', true);
      return axios.get('/api/getData')
        .then(response => {
          commit('setData', response.data);
        });
    }
  }
})

上面代码中，我们在 mutations 中定义了两个方法：`setData` 和 `setLoading`。`setData` 方法用来更新 state 中的数据，`setLoading` 方法用来设置 loading 状态。

在 actions 中，我们定义了一个名为 `fetchData` 的方法，用来触发 API 请求。在这个方法中，我们先通过 `commit` 方法来调用 `setLoading` 方法，将 loading 状态设置为 true，然后使用 axios 发送 API 请求，并在请求完成后通过 `commit` 方法来调用 `setData` 方法，将获取到的数据更新到 state 中。

这样，当我们调用 `fetchData` 方法时，就会依次执行 `setLoading` 方法、发送 API 请求、获取到数据后执行 `setData` 方法，从而实现了在数据请求完成后更新 state 中的数据的效果。