如何根据函数触发呈现Vuex状态?

Question

我已经看到有几个这样的问题，但是我不能得到任何进展，所以我将自己做一个。

事情如下。我有一个国家"所有国家"。它是一个数组，最初被250个国家对象填充。我在我的home组件中正确地呈现了这些国家，问题是我想在点击按钮时过滤按钮所代表的大陆的国家。例如，如果按钮显示"欧洲"，我希望接收属性"大陆"所在的所有国家。是欧洲。

我用下面的代码实现这一点:

const store = createStore({
state: {
allCountries: [],
filteredCountries: [],
countryId: {},
},
mutations: {
filterByContinent(state, payload) {
let countries = [...state.allCountries];
state.filteredCountries = countries.filter(
(country) => country.continent === payload
);
},
},

问题是，我不知道如何渲染过滤后的国家，当按钮被点击，在vuex开发工具，我可以看到如何"过滤国家"。单击时，State将填充正确的大洲国家。

我正在尝试这个，但不工作:

<template>
<div>
<!-- <p class="homeTitle">COUNTRIES:</p> -->
<ul class="countriesBox" v-if="allCountries">
<li
v-for="country in allCountries"
:key="country.id"
class="countryCard"
>
<br />
<router-link
:to="{
name: 'CountryDetail',
params: { id: country.Id },
}"
class="countryName"
>{{ country.name }}</router-link
>
<br />
<p class="countryContinent">{{ country.continent }}</p>
<br />
<img
:src="`${country.flagImage}`"
alt="country flag"
class="flagImage"
/>
</li>
</ul>
<ul class="countriesBox" v-else-if="filteredCountries">
<li
v-for="country in filteredCountries"
:key="country.id"
class="countryCard"
>
<br />
<router-link
:to="{
name: 'CountryDetail',
params: { id: country.Id },
}"
class="countryName"
>{{ country.name }}</router-link
>
<br />
<p class="countryContinent">{{ country.continent }}</p>
<br />
<img
:src="`${country.flagImage}`"
alt="country flag"
class="flagImage"
/>
</li>
</ul>
<div class="backAndForwardButtons">
<button>&#10094;</button>
<button>&#10095;</button>
</div>
<FiltersBar />
</div>
</template>

我用

正确地映射了状态

import { mapState } from "vuex";
import store from "../store";
export default {
name: "HomePage",
computed: {
...mapState(["allCountries"]),
...mapState(["filteredCountries"]),
},
};

如果有人能帮助我，我将非常感激。

Answer 1

您可以创建一个getter来检查是否存在.length到filteredCountries。如果没有，默认为allCountries，如:

countries(state) {
return state.filteredCountries.length ? state.filteredCountries : state.allCountries
}

然后在组件中，您不必复制逻辑来呈现来自两个不同数据源的两个单独列表。只需要使用一个数据源在本例中我称之为countries

Answer 2

您筛选过的国家/地区的商店getter可以是这样的

filteredCountries: (state) => cont => {
return state.countries.filter(country=>{
return country.continent===cont
})
}

好吧，也许代码不是那么准确，但我认为思想是一样的

你可以看到filteredCountriesgetter有一个额外的参数，这是你选择的大陆的位置

然后在你的组件

data(){
return {
cont_filter:"europe"
}
}

希望将值更改为cont_filter不是问题，因为这是您想要更改的按钮单击。现在你可以像这样简单地使用

<li v-for="country in filteredCountries(cont_filter)"
:key="country.name">
{{country.name}}
</li>