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';

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