代码已更新

主页组件：

<template>
   <list :cars="cars" />
   <map :cars="cars" />
   <filter-component />
</template>


data(){
    return {
        keyword: ""
        price: ""
    };
},
mounted(){
    this.$store.dispatch("loadCars");
},
computed: {
    loadApi(){
        return this.$store.getters.loadCars;
    },
    cars(){
        let filter = this.loadApi.filter(textFilter(this.keyword));
        return filter;
    }
}

现在，我要过滤cars个吸气剂。但不是本地方式。试图在全球范围内做。因此，我创建了mixins/textfilter.js和pricefilter.js并将其导出...

export const textFilter = (text) => (car) => {
if (text > 0) {
    if (
      car.name.match(text) ||
      car.color.match(text)
    ) {
      return true;
    } else {
      return false;
    }
  } else {
    return true;
  }
};

并尝试通过过滤器组件生成事件以更新关键字...

<template>
    <input type="text" name="" value="">
</template>

export default {
    data(){
        return {

        };
    },
}

现在问题在这里。如何处理事件（事件总线等）并过滤 home.vue

中的 cars 对象

Answer 1

CODESANDBOX示例：https://codesandbox.io/s/vue-template-4m9c2

这应该有效...

import { textFilter } from "../../mixins/textFilter.js";
import { priceFilter } from "../../mixins/priceFilter.js";

export default {
  computed: {
    allCars(){
      return this.$store.getters.cars;
    },
    volvos() {
      return this.allCars.filter(textFilter('volvo'));
    }
  }
};

请注意，文本过滤器中也存在一些问题。

尝试使用此咖喱函数

export const textFilter = (text) => (car) => {
  if (text.length > 0) {
    if (
      car.name.match(text) ||
      car.color.match(text) ||
      car.price.match(text)
    ) {
      return true;
    } else {
      return false;
    }
  } else {
    return true;
  }
};

要使其在全球范围内甚至可以唯一访问，还可以将过滤器移动到vuex getter中，如下所示：

//  store.js
import { textFilter } from "@/mixins/textFilter.js";
const store = new Vuex.Store({
  state: {
    cars: [
      { name: "Volvo s40", color: '...', price: '...'},
      { name: "Volvo v70r", color: '...', price: '...'},
    ],
    textFilterString: 'volvo'
  },
  getters: {
    filteredCars: state => {
      return state.cars.filter(textFilter(state.textFilterString))
    }
  }
})

这将需要其他操作和方法来管理textFilterString变量，但是除非数据或过滤器字符串发生更改，否则您可以从任何地方获取过滤后的列表而无需任何重复或重新计算。

Answer 2

我建议您每当要使用某些组件都可以轻松访问的过滤器时创建mixins。

Mixins在“官方文档”中了解详情

您只需要创建一个混合说-filtersMixins.js。然后import将其添加到您的组件中。

在您的mixin文件中，您可以将所有额外的vue instance properties导出到您的组件，例如methods

在filtersMixins.js

export const myMixin = {
  created: function () {
    this.hello()
  },
  methods: {
    hello: function () {
      console.log('hello from mixin!')
    }
  }
}

在您的组件中

import { myMixin } from './mixins/filtersMixins'

现在在您的实例内部，简单地称呼它

var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  },
  mixins: [myMixin]
})

现在，在组件中，您可以像引用this一样引用methods来像vue属性一样使用它。您可以通过hello

调用混合方法this.hello()

专业人士-您可以在methods文件中写入通用mixins，并且可以将组件绑定到method，这意味着您可以将组件this用于{ {1}}

如果您要使用不需要mixins methods作为组件的全局方法。

在同一文件中创建它，然后将其导出

binded

并在任何地方使用它

export const globalFilter = str => {
  return str.split('')
}

创建全部使用相同api的全局过滤器函数，并将其用于不同的组件-VUE.js

代码已更新

2 个答案: