I am currently learning Vue with Vuex and I have created a method called 'llamarJson' which is used to retrieve JSON data. However, I am facing difficulties in using this method when the page loads. I have tried various approaches but have not been able to find a solution. I am utilizing Vue and Vuex in my project. Can someone please assist me?
Below is the HTML code snippet:
<!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/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="6d1c0c0e253a3a3825241d14251b15">[email protected]</a>/dist/vuex.js"></script>
</head>
<body>
<div id="caja-vue">
<actividades></actividades>
</div>
<script src="codigo.js"></script>
</body>
</html>
And here is the JS code section:
//components
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'])
}
});
//Vuex
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
});