vue vuex：显示可更新状态答案

【问题标题】：vue vuex: display an updateable statevue vuex：显示可更新状态
【发布时间】：2022-01-22 17:18:07
【问题描述】：

在尝试获取标签中的可更新数据时，我只接收到初始数据，我可以在调试器中看到数据更新。更改状态后，我无法显示新数据：

我在另一个组件中做所有更新的事情我只需要显示来自商店的更新数据

component.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>

store.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 store

【问题讨论】：

@EDG956 是的，对此很抱歉，我进行了更新并检查了您的参考
我试过这条线但什么也没发生：
hello {{ this.$store.state.data }} h1>
我觉得你应该看看this
@EDG956 看看我的编辑部分
@yaronshamul 在组件中添加计算属性并返回此数据 - this.$store.getters.getData 并在模板中使用计算属性

标签： javascript vue.js vuejs3

【解决方案1】：

您应该使用vuex mapGetters 函数来显示您的数据。

在你的组件文件中，在计算属性中导入你的 getter

使用 import {mapGetters} from "vuex"; 导入 mapGetters

computed: {
     ...mapGetters({
        myData: 'store/myData'
     })
}

您的数据应在您的商店更新时随时更新

【讨论】：

你能看看这个link
好的，我删除了其中一个 mapGetters 包装器，它没有给我错误，但仍然无法正常工作：see this pastebin
看看这个code pen 并告诉我它是否回答了您关于如何与商店联系的问题
能否请您添加一些更改，使其支持 vue 版本 3.x？
这里是使用版本 3.0.0 的应用程序：link

hello {{ this.$store.state.data }} h1>