在div上单击事件并过滤vuex数据--vue.js

Question

我被困在这一点上：导出过滤器功能并在vuex存储中使用它。 到这里没问题。 现在我试图将@click事件放在div上。 例如，当我单击时。 奥迪，过滤器需要仅显示“ audi”，如果我再次单击“ audi”，则需要将其从过滤器中删除。

这是沙箱： https : //codesandbox.io/s/filtering-bzphi

filter.js

export const carFilter = car => allcars => {
      if (car.length > 0) {
        if (allcars.name.includes(car)) {
          return true;
        } else {
          return false;
        }
      } else {
        return true;
      }
    };

商店

export const store = new Vuex.Store({
  state: {
    cars: [
      { name: "AUDI" },
      { name: "BMW" },
      { name: "MERCEDES" },
      { name: "HONDA" },
      { name: "TOYOTA" }
    ],
    carBrand: []
  },
  mutations: {
    updateCarsFilter(state, carBrand) {
      state.carBrand = carBrand;
    }
  },
  getters: {
    filteredCars: state => {
      return state.cars.filter(carFilter(state.carBrand));
    }
  }
});

和App.js

<template>
  <div id="app">
    <div class="boxes" :key="index" v-for="(item, index) in cars">{{item.name}}</div>
    <List/>
  </div>
</template>

<script>
import List from "./List.vue";
export default {
  name: "App",
  components: {
    List
  },
  computed: {
    selectBrand: {
      set(val) {
        this.$store.commit("updateCarsFilter", val);
      },
      get() {
        return this.$store.state.carBrand;
      }
    },
    cars() {
      return this.$store.getters.filteredCars;
    }
  }
};
</script>

我还为此创建了一个沙箱。 您可以检查一下以更好地理解。 https://codesandbox.io/s/filtering-bzphi

Answer 1

在store.js中

• 将carBrand默认更改为“
• 添加了mutation clearFilter
• 添加了Getter isActiveFilter

更新

• 从州移除carBrand
• 替换为数组的selectedCars
• 删除有关carBrand突变
• 添加了突变addCarSelection removeCarSelection
• 如果包含汽车，则filteredCars返回selectedCars数组，否则返回cars状态
• 添加了isSelectedCar来检查isSelectedCar中是否有汽车

不再需要carFilter函数。

import Vue from "vue";
import Vuex from "vuex";

Vue.use(Vuex);

export const store = new Vuex.Store({
  state: {
    cars: [
      { name: "AUDI" },
      { name: "BMW" },
      { name: "MERCEDES" },
      { name: "HONDA" },
      { name: "TOYOTA" }
    ],
    selectedCars: []
  },
  mutations: {
    addCarSelection(state, car) {
      state.selectedCars.push(car);
    },
    removeCarSelection(state, car) {
      state.selectedCars = state.selectedCars.filter(r => r.name !== car.name);
    }
  },
  getters: {
    filteredCars: state => {
      if (state.selectedCars.length !== 0) {
        // There's selected cars, return filtered
        return state.selectedCars;
      } else {
        return state.cars;
      }
    },
    isSelectedCar: state => car => {
      return state.selectedCars.some(r => r.name === car.name);
    }
  }
});

在App.vue中

• 加入方法filterCars （从计算属性移动searchText ）
• 添加方法clearFilter

更新

• 删除了filterCars和' filterCars '方法，并从商店映射了新的变异和吸气剂

  methods: {
    addCarSelection(car) {
      this.$store.commit("addCarSelection", car);
    },
    removeCarSelection(car) {
      this.$store.commit("removeCarSelection", car);
    },
    isSelectedCar(car) {
      return this.$store.getters.isSelectedCar(car)
    },
 }

• 添加了isFilterActive()计算属性

更新

• 除去isFilterActive()和searchText从计算属性

  computed: {
    cars() {
      return this.$store.getters.filteredCars;
    },
},

更新

• 更改了模板代码以管理@click事件以添加汽车或从选择中移除汽车

• 框始终显示可用的汽车，如果isSelectedCar在添加或移除功能之间切换。

• 如果未列出完整的汽车目录，则列出显示选定的汽车。

<template>
  <div id="app">
    <div class="boxes" :key="index" v-for="(item, index) in cars">
      <div
        v-if="!isSelectedCar(item)"
        style="cursor:pointer"
        @click="addCarSelection(item)"
      >{{item.name}}</div>
      <div v-else style="cursor:pointer;" @click="removeCarSelection(item)">
        {{item.name}}
        <small>[x]</small>
      </div>
    </div>
    <List/>
  </div>
</template>

此沙箱中提供了更新的版本

https://codesandbox.io/s/filtering-3ej7d