создавать глобальные функции фильтра, которые все используют один и тот же API и использовать его в разных компонентах - VUE.js

Question

Я очень смущен по этому поводу.Попытка создать глобальные функции фильтра, которые используют тот же API и фильтровать его.Действительно запутался, как добиться.Чтобы сделать себя более понятным, приведу пример:

с vuex getters Я загружаю свои list и map компоненты на домашней странице.

Код ОБНОВЛЕНО

home компонент:

<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 {

        };
    },
}

Сейчаспроблема здесь.Как я могу обработать событие (event-bus или т. Д.) И отфильтровать объект cars в home.vue

Answer 1

Я бы предложил вам создать 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]
})

Теперь, в компоненте вы можете просто использовать его как vueсобственности, ссылаясь this Как methods.Вы можете вызывать методы mixin hello с помощью this.hello()

Pros. Вы можете написать methods в своем файле mixins, а компонент можно связать с method, что означает, что вы можете использоватькомпонент this в ваш mixins methods

Если вам нужен глобальный метод, который не обязательно должен быть binded для компонента.

Создайте его в том же файле и просто экспортируйте его

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

и используйте его где угодно

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

Answer 2

Пример 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'));
    }
  }
};

просто обратите внимание, что у вас также есть некоторые проблемы с текстовым фильтром.

tryвместо этого эта функция с карри

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 следующим образом:

//  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, но затем вы можете получить отфильтрованный список из любого места без дублирования или перерасчета, если только данные или строка фильтра не изменятся.