Vuex는 시작 시 API 호출의 데이터를 채웁니다.

Vuex는 시작 시 API 호출의 데이터를 채웁니다.

간단한 질문 죄송합니다.Vue/Nuxt/Vuex는 정말 처음입니다.

저는 현재 vuex 스토어를 가지고 있습니다.이 스토어를 사용하여list처음에 API 호출이 있는 경우(컴포넌트 내에서 인스턴스화하는 경우와 스토어에서 직접 앱의 모든 페이지에서 액세스할 수 있습니다).

store.displaces를 설정합니다.

export const state = () => ({
    list: [],
})

export const mutations = {
    set(state, testArray) {
        state.list = testArray
    }
}

export const getters = {
    getArray: state => {
        return state.list
    },
}

저는 기본적으로 사전 입력하기를 원합니다.state.list컴포넌트가 vuex 스토어에서 직접 데이터를 호출할 수 있도록 합니다.이건 이렇게 생겼을 거야

db.collection("test").doc("test").get().then(doc=> {
    let data = doc.data();
    let array = data.array; // get array from API call
    setListAsArray(); // put the array result into the list
});

이 코드를 어디에 넣어야 하는지(아마 inside store.js), 이것을 수출과 연결하는 방법을 찾고 있습니다.미리 감사드리며 간단한 질문이라면 죄송합니다.

(편집) 컨텍스트:그래서 이 솔루션을 찾고 있는 이유는 (API 호출에서) 데이터를 Vue 컴포넌트 중 하나의 스토어에 커밋하기 때문입니다.index.vue제 메인 페이지에서요.즉, 이 컴포넌트에서 데이터가 초기화되어 있기 때문에 다른 루트로 바로 이동하면 해당 컴포넌트에서 데이터를 사용할 수 없습니다.

즉, http://localhost:3000/에는 데이터가 있습니다.http://localhost:3000/test로 라우팅하면 데이터도 포함되지만, 새 창에서 http://localhost:3000/test로 직접 이동하면 데이터가 없습니다.

편집 2:

제안서를 사용해 보았다.nuxtServerInit

store.js 갱신

export const state = () => ({
    list: [],
})

export const mutations = {
    set(state, dealArray) {
        state.list = dealArray
    }
}

export const getters = {
    allDeals: state => {
        return state.list
    },
}

export const actions = {
    async nuxtServerInit({ commit }, { req }) {
        // fetch your backend     
        const db = require("~/plugins/firebase.js").db;
        let doc = await db.collection("test").doc("test").get();
        let data = doc.data();
        console.log("deals_array: ", data.deals_array); // nothing logged
        commit('set', data.deals_array);       // doesn't work
        commit('deals/set', data.deals_array); // doesn't work
    }
}

nuxtServerInit에서 작업을 시도했지만 다른 컴포넌트에 스토어를 로깅하면 빈 배열이 됩니다.다른 컴포넌트에 스토어를 기록하려고 하면(접속하려고 하면) 다음과 같은 메시지가 나타납니다.

store.state:  {                                                                                                                                     
  deals: {
    list: []
  }
}

다음 중 하나를 제안합니다.

1. 호출fetch의 메서드default.vue레이아웃 또는 임의의 페이지
2. 를 사용하다nuxtServerInit매장 내에서의 직접 행동

---

1. fetch방법

를 사용할 수 있습니다.fetch어느쪽인가의 메서드default.vue레이아웃을 사용하는 각 페이지에 대해 매번 호출됩니다.또는 개별 페이지에 대한 특정 데이터를 로드하려면 개별 페이지에 대한 가져오기 방법을 정의합니다.

<script>
export default {
  data () {
    return {}
  },
  async fetch ({store}) {
    // fetch your backend 
    var list = await $axios.get("http://localhost:8000/list");

    store.commit("set", list);
  },
}
</script>

에 대한 자세한 내용을 참조해 주세요.fetchnuxtjs 문서의 메서드

2. 사용한다nuxtServerInit상점 안에서 액션을 직접 전달합니다.

당신의에서store.js이 새로운 액션을 추가하:

import axios from 'axios';

actions: {
  nuxtServerInit ({ commit }, { req }) {
     // fetch your backend     
     var list = await axios.get("http://localhost:8000/list");

      commit('set', list);
    }
  }
}

당신은에 관해 보다 읽을 수 있다.fetchnuxtjs 문서의 메서드

이 것이 도움이: 바랍니다)

언급URL:https://stackoverflow.com/questions/62832863/vuex-populate-data-from-api-call-at-the-start