如何使组件可重用 - 它使用 vuex

问题描述

我有一个自动完成组件，我想在同一页面上使用不同的数据集两次。问题是因为它们都使用相同的 vuex 状态。我将如何将状态作为道具传递？也许有更好的方法。在此先感谢我才开始使用 vuex，因此非常感谢您的帮助。

autocomplete.vue 看起来像

<template>
  <div>
    <div class="widget__select">
      <div class="autocomplete">
        <h3>{{ formlabel }}</h3>
        <input
          type="text"
          @click="onChange"
          @input="onChange"
          :value="searchAutocomplete"
          @keydown.down="onArrowDown"
          @keydown.up="onArrowUp"
          @keydown.enter.prevent="onEnter"
        />
        <ul
          id="autocomplete-results"
          v-show="isOpen"
          class="autocomplete-results"
        >
          <li class="loading" v-if="isLoading">
            Loading results...
          </li>
          <li
            v-else
            v-for="(result,i) in results"
            :key="i"
            @click="setResult(result)"
            class="autocomplete-result"
            :class="{ 'is-active': i === arrowCounter }"
          >
            {{ result }}
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  props: {
    value: String,formlabel: String,items: {
      type: Array,required: false,default: () => [],},isAsync: {
      type: Boolean,default: false,data() {
    return {
      isOpen: false,results: [],isLoading: false,arrowCounter: 0,};
  },computed: {
    searchAutocomplete: {
      get() {
        return this.$store.state.searchAutocomplete;
      },set(value) {
        this.$store.commit("updatejourneyStart",value);
      },methods: {
    onChange() {
      // Let's warn the parent that a change was made
      this.$emit("input",this.searchAutocomplete);

      // Is the data given by an outside ajax request?
      if (this.isAsync) {
        this.isLoading = true;
      } else {
        // Let's  our flat array
        this.filterResults();
        this.isOpen = true;
      }
    },filterResults() {
      // first uncapitalize all the things
      this.results = this.items.filter((item) => {
        return (
          item.toLowerCase().indexOf(this.searchAutocomplete.toLowerCase()) > -1
        );
      });
    },setResult(result) {
      this.searchAutocomplete = result;
      this.isOpen = false;
    },onArrowDown() {
      if (this.arrowCounter < this.results.length) {
        this.arrowCounter = this.arrowCounter + 1;
      }
    },onArrowUp() {
      if (this.arrowCounter > 0) {
        this.arrowCounter = this.arrowCounter - 1;
      }
    },onEnter() {
      this.searchAutocomplete = this.results[this.arrowCounter];
      this.isOpen = false;
      this.arrowCounter = -1;
    },handleClickOutside(evt) {
      if (!this.$el.contains(evt.target)) {
        this.isOpen = false;
        this.arrowCounter = -1;
      }
    },watch: {
    items: function(val,oldValue) {
      // actually compare them
      if (val.length !== oldValue.length) {
        this.results = val;
        this.isLoading = false;
      }
    },mounted() {
    document.addEventListener("click",this.handleClickOutside);
  },destroyed() {
    document.removeEventListener("click",};
</script>

在页面上组件看起来像

<auto-complete form-label="To" :items="this.journeystarts" />
<auto-complete form-label="From" :items="this.journeyends" />

在我有的商店

journeystarts: ["journey a","journey b","journey c","ect...."],journeyends: ["journey x","journey y","journey z",mutations: {

    updatejourneyStart(state,searchAutocomplete) {
      state.searchAutocomplete = searchAutocomplete;
    },

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）