如何解决如何使组件可重用 - 它使用 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 举报,一经查实,本站将立刻删除。