Javascript 将数据的json加载到vuex存储并访问组件

我正在尝试将内容的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
};

使用站点数据进行更新

这是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}}

这样的组件中，我无法读取未定义的项目名称的属性

我觉得这是一个时间问题，因为当我将它设置为return siteData.global时，它并没有崩溃

---

我不确定我是否做错了什么，或者我错过了让它工作的连接

正如您所猜测的，这里的问题是Vue试图在数据仍在加载时访问该计算属性的

siteData

的内容。虽然

siteData

最初是一个有效对象，但尝试访问

siteData.global.project\u name

失败，因为

siteData

在数据尚未加载时没有字段

global

。为了防止出现错误，您必须包括如下检查：

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

---

为了说明解决方案，下面是一个基于您的代码的简单示例。

感谢您的帮助，我已经测试过，并且效果良好。我只是想知道还有其他办法吗？还是我在做所有应该怎么做的事情？就我个人而言，我认为这是一个很好的模式，应该怎么做。另一种方法是在Vue组件初始化之前加载数据，但通常类似的方法要复杂得多…如果我想在组件加载之前加载数据，请您为我指出要查看的方向。我假设有很多方法可以这样做，但最简单的方法可能是使用

v-if

来防止在加载数据之前呈现整个组件：感谢您提供的JSFIDLE。我将对此进行更多的研究并尝试。