Tengo un archivo json con algunos datos. Tengo que buscar estos datos y mostrarlos en el componente.
En mi tienda vuex en acciones tengo:
async getTodos (context) { const todos = [] const response = await fetch('../../data/todos.json') const responseData = await response.json() todos.push(responseData) context.commit('getTodos', todos) }mutaciones:
getTodos (state, payload) { state.todos = payload }y estado:
state () { return { todos: [] } } Y ahora, ¿cómo hacer que todos en estado y mostrarlos cuando se monta la página de inicio?
Ejemplo de archivo JSON:
[ { "id": "1", "title": "1st todo", "description": "First task", "dueTo": "2021-10-03" }, { "id": "2", "title": "2nd todo", "description": "Second task", "dueTo": "2021-10-02" } ]Bueno, puedes usar mapState en tus componentes.
<template> <div> <div>{{todos}}</div> </div> </template> <script> import { mapState } from 'vuex'; export default { computed: { ...mapState(["todos"]) } } </script>Puedes hacer getter para todos:
getAllTodos: (state) => state.todosLuego asigna captadores en la plantilla:
import { mapGetters } from 'vuex'; computed: { ...mapGetters([ 'getAllTodos' ]), }, <template> <ul> <li v-for="(todo, i) in getAllTodos" :key="i">{{todo}}</li> </div> </template>