vuex 저장소에 데이터의 json을 로드하고 구성 요소에 액세스

vuex 저장소에 데이터의 json을 로드하고 구성 요소에 액세스

콘텐츠의 JSON 파일을 vuejs 앱에 로드하여 컴포넌트에서 액세스하려고 합니다.API를 생성하여 vuex 스토어에 json을 로드할 수 있습니다.

import Vue from 'vue';

const Http = new Vue();

export function getData() {
  return Http.$http.get('./app/assets/content/en_uk.json')
    .then(response => Promise.resolve(response.data))
    .catch(error => Promise.reject(error));
}

및 액션

export const getSiteContent = ({commit}) => {
  api.getData().then(data => {
    commit('siteContent', data);
  });
};

메인 vue 인스턴스의 생성된 함수로 getSiteContent를 실행합니다.

export default new Vue({
  el: '#root',
  store,
  router,
  created() {
    getSiteContent(store);
  },
  render: h => h('router-view')
});

크롬의 vue 디버깅 도구를 사용하면 스토어를 볼 수 있습니다.

export const state = {
  isSearching: false,
  searchQuery: '',
  siteData: {},
  filteredComponents: [],
  hasResults: false,
  activeComponent: null
};

siteData로 갱신됩니다.

이것은 json의 일부입니다.

{
  "global": {
    "project_name": {
      "text": "Project title"
    },
    "search": {
      "form_placeholder": {
        "text": "Search..."
      },
      "no_results": {
        "text": "Sorry no results for '{0}' was found"
      },
      "search_text": {
        "text": "You are searching for '{0}' and there are {1} found"
      }
    }
  }
}

접속하려고 하면

computed: {
      ...mapGetters(['siteData']),
      mumbo () {
        return this.siteData.global.project_name;
      }
    }

에는 ★★★★★★★★★★★★★★★★★★★ 등{{mumbo}}정의되지 않은 project_name 속성을 읽을 수 없습니다.

siteData.global을 반환하도록 설정해도 실패하지 않기 때문에 시간문제인 것 같습니다.

제가 잘못하고 있는지, 아니면 이 작업을 수행하기 위한 연결을 놓치고 있는지 모르겠습니다.

가 Vue의 입니다.siteData데이터를 로드하는 동안 계산된 속성에 대한 정보를 제공합니다.일일 ~일도 although although although although 。siteData처음에 이며, 접속을 .접속하려고 합니다.siteData.global.project_namesiteData " " " 가 .global데이터가 아직 로드되지 않았을 때 말이죠.오류를 방지하려면 다음과 같은 체크 표시를 포함해야 합니다.

mumbo () {
    return this.siteData.global ? this.siteData.global.project_name : 'Loading...';
}

해결책을 설명하기 위해 코드를 기반으로 한 간단한 JSFiddle을 소개합니다.

언급URL : https://stackoverflow.com/questions/40635197/load-json-of-data-into-vuex-store-and-access-in-component