Nuxt fetch hook api 无法访问 api 文件夹

Question

我有一个我在fetch() 钩子中调用的 api：

pages/pageOne.vue:

  async fetch() {
    const { store, error } = this.$nuxt.context;
    try {
      await store.dispatch("folderOne/apiOne", null, { root: true });
    } catch (e) {
      error({
        message: "error"
      });
    }
  }

然后在我的商店中，我有这样的apiOne 操作设置：

store/folderOne/index.js:

//importing the api file here
const actions = {
   apiOne({ commit }) {
    apiFile.apiOne().then(data => {
        if(data && data.status === 200){
          // then commit
        }
      })
      .catch(error => {
        console.log(error);
      });
  },
}

然后我有一个用于我的 API 设置的文件，如下所示：

api/apiFile.js:

import axios from "axios";

const httpClient = axios.create({
  headers: {
    key: 'value
  }
});

const baseUrl = process.env.config.baseUrl;

export default {
  apiOne() {
    return httpClient.get(`${baseUrl}values);
  },
}

它不起作用。但是，当我在 @click 方法中调用相同的 apiOne 时，它会起作用。任何人都知道出了什么问题，我该如何解决？

Answer 1

您的商店是并且应该是您的应用程序的全局构造。 这意味着当您要求采取行动并且您的设置正确时，您不必自己处理指令/文件夹。

在您的情况下，您应该做的就是像这样在组件中分派操作：

async fetch() {
    const { store, error } = this.$nuxt.context;
    try {
      await store.dispatch("apiOne", null, { root: true });
    } catch (e) {
      error({
        message: "error"
      });
    }
  }