我正在尝试将内容的JSON文件加载到我的vuejs应用程序中并在组件中访问它。我可以通过创建API将json加载到vuex存储中:

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


在chrome中使用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}}这样的组件中,我无法读取undefined的project_name的属性。

我觉得这是一个时间问题,因为当我将其设置为返回siteData.global时,它不会掉下来

我不确定自己是在做错什么,还是缺少连接才能正常工作。

最佳答案

如您所料,这里的问题是Vue正在尝试在仍加载数据的同时访问该计算属性的siteData内容。尽管siteData最初是有效对象,但尝试访问siteData.global.project_name失败,因为在尚未加载数据时siteData没有字段global。为防止该错误,您将必须包括以下检查:

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


为了说明解决方案,这里是一个基于您的代码的简单JSFiddle

07-27 14:45