nuxtJS与Axios和VueX的简单使用

Question

I'm discovering VueJS and I have troubles querying an API. There are (too) many resources, and it looks like there is a different approach for each tutorial I meet. Now I'm getting lost...

The project is a little 3 pages showcase. Content is provided by an API, one endpoint for each language. I would like to use VueX to store the data, and to update it according to a language switch interaction.

Following the documentation, the "classical" approach is deprecated, and I use the "modules" approach. Still, I suppose that it's ok to centralize data at the store root as only one API call is required:

/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;
  }
};

At this point, I expect the content to be made available to the different pages or components.

/components/A_component.vue and/or /pages/index.vue

...
  {{ content }}
...

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

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

However, nothing is displayed. Indeed, the content object is not updated and remains empty.

Answer 1

Example for 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));
  }
};

Using nuxtServerInit usually only for https://nuxtjs.org/api/context#the-context I assume your params.lng should become from the context

Answer 2

Ok, I finally found where the bug was coming from.

actions should be exported as an object, not a function:

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);
  }
};