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品牌默认设置更改为“
添加了突变clearFilter
添加了吸气剂isActiveFilter

更新

从状态

carBrand

由selectedCars取代，它是一个数组
删除了关于carBrand的变异
添加了突变addCarSelection removeCarSelection
filteredCars如果包含汽车，则返回selectedCars数组，否则返回cars状态
添加了isSelectedCar，以检查选择中是否有汽车

不再需要filter.js中的

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和'clearFilter'方法并映射了商店中的新变异和获取方法

  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

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

1 个答案: