vue vuex：显示可更新状态

Question

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

我正在另一个组件中执行所有更新操作我只需要显示来自商店的更新数据

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

Answer 1

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

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

使用 import {mapGetters} from "vuex";

导入 mapGetter

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

只要您的商店更新，您的数据就会更新

vue vuex：显示可更新状态

vue vuex: display an updateable state

javascript

vue.js

vuejs3