Javascript Vuex:Getter未从外部API获取数据

我试图从外部API获取数据并在我的组件中显示数据，但当我的API中实际有数据时，它返回一个空数组。 在我的模块中，我有以下内容：

import axios from 'axios';

const state = {
    countries = []
}

const getters = {
    allCountries: (state) => state.countries;
}

const actions = {
    //Fecth all the countries from the API
  async fetchCountries({ commit }) {
    const response = await axios.get('URL');
    commit('setCountries', response.data);
  },
}

const mutations = {
    setCountries: (state, countries) => (state.countries = countries),
}

export default {
  state,
  getters,
  actions,
  mutations,
};

组成部分：

<template>
    <div v-for="country in allCountries" :key="country.id">
       <small>{{country.name}}</small>
    </div>
</template>
<script>
import { mapGetters} from 'vuex';

export default{
    name: 'CompCountry',
    computed: mapGetters(['allCountries'])
}
</script>

{{country.name}
从“vuex”导入{mapGetters}；
导出默认值{
名称：'CompCountry'，
计算：映射器（['allCountries']））
}

您缺少分派操作的功能，为此，您应该在生命周期钩子中运行它，如

mounted

：

<template>
    <div v-for="country in allCountries" :key="country.id">
       <small>{{country.name}}</small>
    </div>
</template>
<script>
import { mapGetters} from 'vuex';

export default{
    name: 'CompCountry',
    computed:{ ...mapGetters(['allCountries']},
   mounted(){
     this.$store.dispatch('fetchCountries')
   }
}
</script>

{{country.name}
从“vuex”导入{mapGetters}；
导出默认值{
名称：'CompCountry'，
计算：{…映射器（['allCountries']}，
安装的（）{
此.$store.dispatch（'fetchCountries'）为
}
}

console中是否出现一些错误？我收到一条消息说属性“allCountries”没有反应，所以在我的变异中我设置了setCountries:（state，countries）=>Vue.set（state，state.countries，countries）；但是，它也不起作用。您的原始代码是

name:'compcountries'，computed:magetters（['allCountries']）

或者您复制时只删除了

导出默认值{…}

吗？我只删除了导出默认值{…}我明白了，但您应该有

这个。$store.dispatch（'fetchCountries'））

在代码中的某个地方，它运行操作以获取数据，就像函数调用一样，您定义了函数，但没有运行它，不客气，我希望您理解，如果不介意，请询问我是否理解，非常感谢！