Axios 및 VueX에서 nuxtJ를 간단하게 사용

Axios 및 VueX에서 nuxtJ를 간단하게 사용

VueJ를 검색 중인데 API를 쿼리하는 데 문제가 있습니다.리소스가 너무 많아서 만나는 튜토리얼마다 다른 접근법이 있는 것 같습니다.이제 난 길을 잃어가고 있어...

이 프로젝트는 3페이지 분량의 쇼케이스입니다.콘텐츠는 API에 의해 언어별로 하나의 엔드포인트로 제공됩니다.VueX를 사용하여 데이터를 저장하고 언어 스위치 상호 작용에 따라 업데이트하고 싶습니다.

이 문서에서는 "클래식" 접근방식은 권장되지 않으며, 저는 "모듈" 접근방식을 사용합니다.단, API 호출은 1개만 필요하므로 스토어 루트로 데이터를 집중 관리해도 괜찮다고 생각합니다.

/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개체가 업데이트되지 않고 비어 있습니다.

좋아, 드디어 그 버그가 어디서 왔는지 찾았어.

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

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

사용.nuxtServerInit보통 https://nuxtjs.org/api/context#the-context에만 해당됩니다.params.lng문맥에서 벗어나야 한다

언급URL : https://stackoverflow.com/questions/57759309/a-simple-use-of-nuxtjs-with-axios-and-vuex