Javascript 刷新时的VueJs未运行axios

我的VueJs应用程序有一些问题。我从他们那里买了Vuexy模板。 所以我创建了新的组件调用方CountryTable.vue，它实际上可以工作，但当我刷新页面时它不工作，只有当我登录或更改另一个页面时，但当我刷新时它显示该表为空。 下面是CountryTable的外观：

<template>
<div class="vx-col w-full">
<vx-card title="Countries">
<div slot="no-body" class="mt-4">

  <vs-table class="table-dark-inverted" :data="activeCountries">
    <template slot="thead">
      <vs-th sort-key="name" colspan="2">Country</vs-th>
      <vs-th sort-key="sales">Sales</vs-th>
      <vs-th sort-key="products">Products</vs-th>
      <vs-th sort-key="accessories">Accessories</vs-th>
      <vs-th sort-key="basket">Basket</vs-th>
      <vs-th sort-key="deliveries">Deliveries</vs-th>
      <vs-th sort-key="amount">Amount</vs-th>
    </template>

    <template slot-scope="{data}" class="text-center">
      <vs-tr :data="tr" :key="indextr" v-for="(tr, indextr) in data" :style="{animation: 'flipInX ' +  (indextr * 0.2) + 's'}">

        <vs-td :data="data[indextr].name">
        <img width="30" :src="data[indextr].flag" :alt="data[indextr].name">
        </vs-td>

        <vs-td :data="data[indextr].name">
          {{ data[indextr].name }}
        </vs-td>

        <vs-td :data="data[indextr].sales">
          {{ data[indextr].sales }}
        </vs-td>

        <vs-td :data="data[indextr].products">
          {{ data[indextr].products }}
        </vs-td>

        <vs-td :data="data[indextr].accessories">
          {{ data[indextr].accessories }}
        </vs-td>
        
        <vs-td :data="data[indextr].basket">
          {{ data[indextr].basket }}
        </vs-td>

        <vs-td :data="data[indextr].deliveries">
          {{ data[indextr].deliveries }}
        </vs-td>

        <vs-td :data="data[indextr].amount">
          {{ data[indextr].amount }}
        </vs-td>

      </vs-tr>
    </template>
    </vs-table>
</div>
    </vx-card>
    
    </div>
</template>

<script>
import { mapState } from "vuex";
import Countries from "../../http/Countries";

export default {
  data() {
    return {
      selected: [],
      'tableList': [
        'vs-th: Component',
        'vs-tr: Component',
        'vs-td: Component',
        'thread: Slot',
        'tbody: Slot',
        'header: Slot'
      ]
    }
  },
  computed: {
            ...mapState({
              activeCountries: state => state.activeCountries
            })
        },

  mounted() {
      Countries.activeCountries().then(response => {
        this.$store.commit("ACTIVE_COUNTRIES", response.data.countries);
      });
  }
}

</script>

activeCountries() {
    return Api().get("/userCountries");
  },

下面是API：

import axios from "axios";

let BaseApi = axios.create({
  baseURL: "http://127.0.0.1:8000/api/"
});

let Api = function() {
  let token = localStorage.getItem("accessToken");

  if (token) {
    BaseApi.defaults.headers.common["Authorization"] = `Bearer ${token}`;
  }

  return BaseApi;
};

export default Api;

在控制台中，我有如下错误：

TypeError:传播不可编辑实例的尝试无效

正如您所见，我创建了一个简单的表，名为function，它实际上是与axios请求的链接，并映射了它们。

---

挂载功能是一个问题吗？我尝试了创建和更新，但没有成功。

看起来像是mapState问题

试着改变

...mapState({
    activeCountries: state => state.activeCountries
})

到

---

我不知道怎么做，我试图更新一些依赖项，在尝试运行应用程序时收到了很多错误。我安装了相同的依赖项，现在可以使用了。

你可以发布

国家/地区的代码吗？activeCountries

？我已经编辑了问题好了，现在也添加

Api

：DOkay我已经在

创建的

钩子中更新了它，而不是

挂载的

，它们做的事情完全相同

...mapState(['activeCountries'])