如何在Vue组件中通过Vuex Store获取Ajax请求响应？

我来给你梳理两种常用的方法，帮你拿到Ajax请求的响应：

方法1：让Vuex Action返回Promise，组件直接接收响应 #

因为你用的Ajax请求（比如axios、fetch）本身就是基于Promise的，所以只需要在Vuex的addProduct action里返回请求的Promise，就能在组件里直接获取响应数据。

首先修改Vuex模块里的addProduct action：

// Vuex模块中的addProduct action
async addProduct({ commit }, filters) {
  try {
    // 假设你用axios发送请求
    const response = await axios.post('/api/products', filters);
    // 这里依然可以做你原来的状态更新，比如commit修改status
    commit('SET_ADD_STATUS', true);
    return response; // 把响应返回给调用的组件
  } catch (error) {
    commit('SET_ADD_STATUS', false);
    console.error('添加产品请求失败:', error);
    throw error; // 抛出错误，让组件可以捕获处理
  }
}

然后修改组件里的add方法，用async/await来接收响应：

// 组件中的add方法
async add(event) {
  try {
    // 调用action并拿到响应
    const ajaxResponse = await this.addProduct(this.filters);
    console.log('Ajax请求响应:', ajaxResponse);
    
    // 你的原有逻辑
    if(this.getStatusAddProduct) {
      // ...这里写你原来的代码
    }
  } catch (error) {
    // 处理请求失败的情况
    console.error('组件中捕获的请求错误:', error);
  }
},
...mapActions(['addProduct'])

方法2：把响应存入Vuex State，通过Getter获取 #

如果你的响应数据需要在多个组件中使用，或者希望响应数据和Vuex状态保持同步，那可以把响应存在Vuex的state里，再通过getter暴露给组件。

首先完善Vuex模块的state、mutation和getter：

// Vuex模块的state
state: {
  statusAddProduct: false,
  addProductResponse: null // 用来存储Ajax响应
}

// mutations
mutations: {
  SET_ADD_STATUS(state, status) {
    state.statusAddProduct = status;
  },
  SET_ADD_PRODUCT_RESPONSE(state, response) {
    state.addProductResponse = response;
  }
}

// actions
async addProduct({ commit }, filters) {
  try {
    const response = await axios.post('/api/products', filters);
    commit('SET_ADD_STATUS', true);
    commit('SET_ADD_PRODUCT_RESPONSE', response); // 把响应存入state
  } catch (error) {
    commit('SET_ADD_STATUS', false);
    commit('SET_ADD_PRODUCT_RESPONSE', null); // 失败时清空响应
    throw error;
  }
}

// getters
getters: {
  getStatusAddProduct: state => state.statusAddProduct,
  getAddProductResponse: state => state.addProductResponse // 新增的getter
}

然后在组件中添加这个getter，就能随时获取响应数据：

computed: {
  ...mapGetters(['getStatusAddProduct', 'getAddProductResponse']) // 引入新增的getter
},
methods: {
  async add(event) {
    await this.addProduct(this.filters);
    // 从getter拿到响应
    console.log('从Vuex获取的响应:', this.getAddProductResponse);
    
    if(this.getStatusAddProduct) {
      // ...你的原有逻辑
    }
  },
  ...mapActions(['addProduct'])
}

两种方法的选择建议 #

• 如果只有当前组件需要用到这个响应数据，方法1更简洁直接；
• 如果多个组件需要共享这个响应数据，或者希望响应数据和Vuex状态绑定，方法2更合适。

内容的提问来源于stack exchange，提问作者moses toh