文章/答案/技术大牛

发布

社区首页 >问答首页 >vue vuex:显示可更新的状态

问vue vuex:显示可更新的状态
EN

Stack Overflow用户

提问于 2021-12-21 09:00:39

回答 1查看 92关注 0票数 1

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

我在另一个组件中做所有的更新工作，我只需要显示存储中更新的数据

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

javascript

vue.js

vuejs3

回答 1

Stack Overflow用户

回答已采纳

发布于 2021-12-21 10:31:35

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

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

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

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

您的数据在任何时候都应该更新。

票数 2

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/70432839

复制

相似问题

问vue vuex:显示可更新的状态
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问vue vuex:显示可更新的状态EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问vue vuex:显示可更新的状态
EN