我正在用Vuex学习Vue，我做了一个名为“ llamarJson”的方法，该方法获取json数据。页面加载时，我不知道如何使用它。我尝试了很多方法，但是找不到解决方案。我正在使用Vue和Vuex。拜托，你能帮我吗？
这就是代码html：
<!DOCTYPE html>
<html>
<head>
<title>Vue</title>
<!-- Vue -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<!-- Vuex -->
<script src="https://unpkg.com/[email protected]/dist/vuex.js"></script>
</head>
<body>
<div id="caja-vue">
<actividades></actividades>
</div>
<script src="codigo.js"></script>
</body>
</html>
那就是JS代码：
//componentes
Vue.component('actividades', {
template: /*html*/
` <div>
<h1>Hello friend</h1>
<ul v-for="item of actividades">
<li>{{ item.name }}</li>
</ul>
</div>
`,
computed: {
...Vuex.mapState(['actividades'])
},
methods: {
...Vuex.mapActions(['llamarJson'])
}
});
//VueEx
const store = new Vuex.Store({
state: {
actividades: [],
programas: []
},
mutations: {
llamarJsonMutation(state, llamarJsonAction){
state.actividades = llamarJsonAction;
}
},
actions: {
llamarJson: async function(){
const data = await fetch('https://jsonplaceholder.typicode.com/users');
const actividades = await data.json();
commit('llamarJsonMutation', actividades);
}
}
});
//Vue
new Vue({
el: '#caja-vue',
store: store
});
您应该为此使用vue生命周期挂钩，请阅读以下链接：
这些是Vue挂钩：
创作钩
beforeCreate（）：事件和生命周期已初始化，但尚未使数据响应
created（）：您可以访问反应性的数据和事件，但尚未安装或呈现模板和虚拟DOM
安装挂钩
beforeMount（）：在初始渲染之前运行
Mounted（）：您可以访问反应组件，模板和渲染的DOM
更新挂钩
beforeUpdate（）：在数据更改之后且重新呈现DOM之前运行
Updated（）：在数据更改并重新渲染DOM后运行
破坏钩
beforeDestroy（）：在拆解之前运行
destroy（）：拆解后运行
根据您的需要（如果您想访问DOM或不访问DOM）进行页面加载，则可以使用created()或mounted()挂钩。
只需在vue组件对象中定义它们，然后像这样在其中调用您的方法：
created() {
this.someMethod();
}
在您的情况下，您还可以像这样直接从创建的（或任何其他钩子）调用vuex动作：
created() {
this.$store.dispatch('vuexAction');
}
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句