加载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
我不知道如果我做错事或我缺少一个连接的时间问题让这个工作。
答
正如你所猜测的,这里的问题是Vue试图访问siteData
内容的那个计算属性,而数据仍在加载。虽然最初siteData
是一个有效的对象,但试图访问siteData.global.project_name
失败,因为siteData
在数据尚未加载时没有字段global
。为了防止错误,你将不得不包括像这样的检查:
mumbo() {
return this.siteData.global ? this.siteData.global.project_name : 'Loading...';
}
为了说明这个解决方案,下面是根据你的代码的简单JSFiddle。
感谢您的这一点,我已经测试过,这个工程。我只是想知道是否有其他方法呢?还是我在做一切应该怎么做? – saunders
就我个人而言,我认为这是一个很好的模式和应该完成的方式。另一种方法是在Vue组件初始化之前加载数据,但通常类似这样的事情要复杂得多...... – Aletheios
如果我想在组件加载之前加载数据,可以指出我的方向请看 – saunders