加载json的数据到vuex存储和访问组件

我想加载一个JSON文件的内容到我的vuejs应用程序并在我的组件中访问它。我能够通过创建一个API来加载JSON到vuex店：主VUE实例的创建功能加载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); 
    }); 
};

我跑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的一部分：在我的组件一样{{mumbo}}我弄不懂的不确定PROJECT_NAME财产

{ 
    "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; 
     } 
    }

。

我觉得这是因为它没有翻倒，当我将它设置为返回siteData.global

我不知道如果我做错事或我缺少一个连接的时间问题让这个工作。

来源

2016-11-16 saunders

正如你所猜测的，这里的问题是Vue试图访问siteData内容的那个计算属性，而数据仍在加载。虽然最初siteData是一个有效的对象，但试图访问siteData.global.project_name失败，因为siteData在数据尚未加载时没有字段global。为了防止错误，你将不得不包括像这样的检查：

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

为了说明这个解决方案，下面是根据你的代码的简单JSFiddle。

来源

2016-11-16 22:05:59 Aletheios

感谢您的这一点，我已经测试过，这个工程。我只是想知道是否有其他方法呢？还是我在做一切应该怎么做？ – saunders

就我个人而言，我认为这是一个很好的模式和应该完成的方式。另一种方法是在Vue组件初始化之前加载数据，但通常类似这样的事情要复杂得多...... – Aletheios

如果我想在组件加载之前加载数据，可以指出我的方向请看 – saunders

加载json的数据到vuex存储和访问组件

回答

相关问题