Vuex 参数传递答案

【问题标题】：Vuex parameter passingVuex 参数传递
【发布时间】：2022-01-17 19:48:13
【问题描述】：

this.$store.commit(
  'deleteCheckboxItems',
   response.data.items.forEach(element => {
     element.id;
     })
   );

从收到的api 我需要获取 id 并将其传递给 vuex。该函数有效，但在调用时它会在控制台中写入 undefined。

vuex：

 deleteCheckboxItems(state, payload) {
  if(state.filteredBrands) {
    state.filteredBrands = state.filteredBrands.filter((item) => {
      console.log(payload);
      item.id == payload;
    });
  }

在 vuex 中我需要id 来比较，如果有相同的则删除。我应该改变什么？

【问题讨论】：

标签： vue.js vue-component vuex

【解决方案1】：

使用map 函数代替forEach：

this.$store.commit(
  'deleteCheckboxItems',
   response.data.items.map(({id}) => id)
);

您的filter 函数也需要一些更改。它应该返回一个布尔值，但你忘记返回值了。

deleteCheckboxItems(state, payload) {
  console.log(payload);
  if (state.filteredBrands) {
    state.filteredBrands = state.filteredBrands.filter((item) => {
      return item.id == payload;
    });
  }
}

payload也可能是一个id数组，你应该使用includes这样的函数来检查你的情况。

【讨论】：

好的，用map我的vuex得到了id的数组，但它仍然清除了整个数组而不是传递的值。我的意思是我在vuex 中的功能没有按我想要的方式工作
答案已更新。 @亚历克斯
非常感谢！我用return !payload.includes(item.id);

【解决方案2】：

如果您不想更改 deleteCheckboxItems 的实现以采用数组包装 this.$store.commit 与 for each 像这样： response.data.items.forEach(element => { this.$store.commit('deleteCheckboxItems', element) });

此外，更重要的是您的filteredBrands.filter不会过滤，因为您没有返回值。你必须return item.id === payload。

【讨论】：