Javascript 使用Vuex筛选其他组件的单选按钮

我正在尝试过滤另一个组件。我对整个Vue和Vuex都是新手，如果我的问题太多，我很抱歉。假设我有这个网站

单选按钮过滤器和过滤列表是两个不同的组件。如果单击单选按钮，我希望获取该值并将其传递到Axios中，以使用该值获取API，并将其显示在筛选列表组件中。假设我单击一个值为3的单选按钮，那么我的get方法将是

axios.get（'API-here.com/filter？type='+3）

我的问题是，如何使用Vuex实现这一点？到目前为止，这是我的代码

store/index.js

const store = new Vuex.Store({
  state: {
    isChecked: '0',
  },
  mutations: {
    SET_CATEGORY(state, isChecked) {
      state.isChecked = isChecked;
    }
  }
}),

我也有这个代码，但我不知道我应该把它放进什么文件

new Vue({
  el: '#app',
  store,
  computed: {
    isChecked :{
      get() {
        return this.$store.state.isChecked;
      },
      set(value) {
        this.$store.commit("SET_CATEGORY", value);
      }
    }
  }
})

---

提前非常感谢

首先，数字为0的字符串是真的。使用

false

或数字

0

，而不是字符串

'0'

对于筛选的项数据，请使用引用存储值的计算属性。它将进行反应性更新

计算：{
filteredItems（）{
返回this.items.filter（it=>true）//todo引用您的复选框来决定。
}
}

例如，筛选较长类别长度的复选框：

this.isChecked ? it.category.length > 5 : true

---

存储过滤器对于您的示例不是必需的，因此我将跳过它。为api结果创建状态，并使用操作调用api并在存储中设置这些结果：

Vuex

状态：{
结果：[]
},
突变：{
设置结果（状态、结果）{
state.results=结果；
}
},
行动：{
异步setFilter（{commit}，filter）{
const response=await axios.get（'API-here.com/filter？type='+filter）；
提交（'SET_RESULTS'，response.data）；
//提交（“设置过滤器”，过滤器）；
}
}

当单选按钮更改时，调度操作：

无线电元件

方法：{
更改过滤器（e）{
这是.store.dispatch（'setFilter'，即target.value）；
}
}

使用其他组件中的结果：

列表组件

{{results}

计算：{
…映射状态（['results']）
}

哦，很抱歉，我忘了提到0表示“所有列表”。谢谢你的回答！工作非常顺利！谢谢！真的从你身上学到了很多。