Quiero obtener un valor específico de un objeto dentro del estado de vuex.
Déjame mostrarte lo que quiero decir:
import { createStore } from "vuex"; export default createStore({ state: { cards: [{ title: "Blog 1", htmlCode: "This is blog 1", index: 1, }, { title: "Blog 2", htmlCode: "This is blog 2", index: 2, }, { title: "Blog 3", htmlCode: "This is blog 3", index: 3, }, { title: "Blog 4", htmlCode: "This is blog 4", index: 4, }, { title: "Blog 5", htmlCode: "This is blog 5", index: 5, }, { title: "Blog 6", htmlCode: "This is blog 6", index: 6, }, { title: "Blog 7", htmlCode: "This is blog 7", index: 7, }, ], }, getters: { getTodoById: (state) => (id) => { return state.cards.find(todo => todo.index === id) } }, mutations: {}, actions: {}, modules: {}, }); Ahora, si inserto este valor en mi código: <p>{{ this.$store.getters.getTodoById(2) }}</p> , obtengo este resultado: { "title": "Blog 2", "htmlCode": "This is blog 2", "index": 2 } Lo que quiero es el valor de, por ejemplo htmlCode y ese resultado sería This is blog 2 .
Ojalá alguien entienda lo que quiero decir.
Para mayor claridad: quiero este resultado en el navegador: Este es el blog 2
Es muy importante para mi sitio web que esté hecho con getters vuex.
Esta es una posible solución
getTodoById: (state) => (id) => { const todo = state.cards.find(todo => todo.index === id) return todo.htmlCode } Otra solución es crear datos de tareas todo en el componente y en created() agregar su getter y asignar a estos datos.
data() { return { todo: null, }; }, created() { this.todo = this.$store.getters.getTodoById(id) // for example extracted by the route }, <p>{{ todo.htmlCode }}</p>Esto debería funcionar.
<p>{{ this.$store.getters.getTodoById(2).htmlCode}}</p>