Question

我正在发现VueJS，但在查询API时遇到了麻烦。资源太多了，而且我遇到的每个教程似乎都有不同的方法。现在我迷路了...

该项目只有3页的展示空间。内容由API提供，每种语言都有一个端点。我想使用VueX来存储数据，并根据语言切换交互来更新它。

在文档之后，不赞成使用“经典”方法，而我使用“模块”方法。不过，我认为将数据集中在商店根目录中是可以的，因为只需要一个API调用即可：

/store/index.js

import axios from "axios";

// STATE - Initial values
export const state = () => ({
  content: {}
});

// ACTIONS - Asynchronous operations
export const actions = () => ({
    async nuxtServerInit({ commit }) {
    // I will introduce the language variable later here
    const response = await this.$axios.$get('https://APIURL.com/fr');
    const content = response.data;
    commit("setContent", content);
  }
});

// MUTATIONS - Updates the state
export const mutations = {
  setContent(state, content) {
    state.content = content;
  }
};

目前，我希望内容可以在不同的页面或组件中使用。

/components/A_component.vue和/或/pages/index.vue

...
  {{ content }}
...

// LOADS the store
import { mapState } from "vuex";

// COMPUTES the values retrieval
export default {
  computed: mapState(["content"])
};

但是，什么也不显示。实际上，content对象不会更新，而是保持为空。

Answer 1

好吧，我终于找到了错误的来源。

actions应该作为对象而不是函数导出：

export const actions = {
    async nuxtServerInit({ commit }) {
    // I will introduce the language variable later here
    const response = await this.$axios.$get('https://APIURL.com/fr');
    const content = response.data;
    commit("setContent", content);
  }
};

Answer 2

nuxtServerInit示例

// store/settings.js
export const mutations = {
  GET_PRICE_VIEW_FROM_SERVER(ctx, payload) {
    ctx.priceView = payload;
  }
}

// store/index.js
import { getPriceView } from "../utils/getSettings";

export const actions = {
  nuxtServerInit({ commit }, { req }) {
    commit("setting/GET_PRICE_VIEW_FROM_SERVER", getPriceView(req));
  }
};

通常仅对https://nuxtjs.org/api/context#the-context使用nuxtServerInit 我认为您的params.lng应该来自上下文

nuxtJS与Axios和VueX的简单使用

2 个答案: