时间戳

首页 > 解决方案 > 使用 Vuex 过滤另一个组件的单选按钮

javascript - 使用 Vuex 过滤另一个组件的单选按钮

问题描述

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

在此处输入图像描述

单选按钮过滤器和过滤列表是两个不同的组件。如果我单击一个单选按钮，我想获取该值并将其传递给 Axios 以使用该值获取 API 并将其显示在过滤列表组件中。假设我单击一个值为 3 的单选按钮，那么我的 get 方法将是axios.get('API-here.com/filter?type=' + 3).

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

存储/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);
      }
    }
  }
})

非常感谢您！

标签： javascriptvue.jsvuejs2vue-componentvuex

解决方案

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

Vuex

state: {
  results: []
},
mutations: {
  SET_RESULTS(state, results) {
    state.results = results;
  }
},
actions: {
  async setFilter({ commit }, filter) {
    const response = await axios.get('API-here.com/filter?type=' + filter);
    commit('SET_RESULTS', response.data);
    // commit('SET_FILTER', filter);
  }
}

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

无线电组件

<input type="radio" v-model="r" value="1" @change="changeFilter">
<input type="radio" v-model="r" value="2" @change="changeFilter">
<input type="radio" v-model="r" value="3" @change="changeFilter">

methods: {
  changeFilter(e) {
    this.$store.dispatch('setFilter', e.target.value);
  }
}

使用其他组件中的结果：

列表组件

{{ results }}

computed: {
   ...mapState(['results'])
}

推荐阅读