将 json 数据加载到 vuex 存储中并在组件中访问

Question

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

I 运行 getSiteContent on created function of the main vue instance

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}} 我无法读取属性 of project_name of undefined.

我觉得这是一个时间问题，因为我把它设置为 return siteData.global

它不会倒下

我不确定是我做错了什么，还是我缺少一个连接来让它工作。

Answer 1

正如您猜到的那样，这里的问题是 Vue 正在尝试访问 siteData 的内容，以便在数据仍在加载时计算属性。尽管 siteData 最初是一个有效对象，但尝试访问 siteData.global.project_name 失败，因为 siteData 在数据尚未加载时没有字段 global。为防止错误，您必须包括这样的检查：

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

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

将 json 数据加载到 vuex 存储中并在组件中访问

load json of data into vuex store and access in component

javascript

vuex

vuejs2