mientras trato de obtener datos actualizables en una etiqueta, solo recibo los datos iniciales, puedo ver la actualización de datos en el depurador. y después de cambiar el estado no puedo mostrar los nuevos datos:
Estoy haciendo todo lo relacionado con la actualización en otro componente. Solo necesito mostrar los datos actualizados de la tienda.
componente.vue
<template lang="js"> <div> <h1>hello {{ store.getters.myData}}</h1> <a><router-link to="/register">Go to Sign up</router-link></a> <a><router-link to="/">Go to Home</router-link></a> <router-view></router-view> </div> </template> <script> import store from "../store"; export default { }; </script>tienda.js
import Vuex from 'vuex' const state = { data: 'initial data'} const getters = { myData(state){ return state.data; } } const mutations = { UPDATE_DATA(state, data){ state.data = data; } } const actions = { setData(data) { store.commit("UPDATE_DATA", data);} } const store = new Vuex.Store({ state, actions, mutations, getters }) export default storeDebe usar la función vuex mapGetters para mostrar sus datos.
En su archivo de componentes, importe su captador dentro de la propiedad calculada
Importar mapGetters con import {mapGetters} from "vuex";
computed: { ...mapGetters({ myData: 'store/myData' }) }Sus datos deben actualizarse cada vez que se actualice su tienda