Vue JS：更改后vuex状态不更新组件[重复]

Question

我创建了一个信息栏，我想用来自组件的信息更新一个区域。我将它添加为App.vue 的孩子：

<template>
  <div id="app">
    <InfoBar />  // my info-bar
    <router-view/>
  </div>
</template>

为了能够从其他组件更新 m<InfoBar />，我决定尝试使用 Vuex 并使用 mutations 更改信息：

Vuex 商店：

   export const store = new Vuex.Store({
        state:{
            infoBarText: "Text from Vuex store" ,  // initial text for debugging         
        },
        mutations:{
            setInfoBarText(state,text){
                state.infoBarText = text;
            }
        }

infobar.vue

<template>
  <div>
    {{infoString}} // the result is always "Text from Vuex store"
  </div>
</template>

<script>
export default {
  name: "infoBar",
  data() {
    return {
      infoString: this.$store.state.infoBarText      
    }
  }

现在，我想使用其他组件的 Vuex 突变来更新文本：

其他.vue：

mounted() {
 this.$store.commit("setInfoBarText", "Text from Component");
}

我用 Vue 开发者工具检查了infoBarText 的state 并成功更改为"Text from Component" 但它没有更改组件中的文本。

我做错了什么？

Answer 1

您应该使用computed 而不是data，因为data 本身一旦被分配就不会响应。这将解决您的问题：

export default {
  name: "infoBar",
  computed: {
    infoString: function() {
      return this.$store.state.infoBarText;
    }
  }
}

概念验证：

const infobar = Vue.component('infobar', {
  template: '#infobar-template',
  computed: {
    infoString: function() {
      return store.state.infoBarText;
    }
  }
});

const store = new Vuex.Store({
  state: {
    infoBarText: "Text from Vuex store", // initial text for debugging         
  },
  mutations: {
    setInfoBarText(state, text) {
      state.infoBarText = text;
    }
  }
});

new Vue({
  el: '#app',
  methods: {
    updateText() {
   store.commit("setInfoBarText", "Text from Component");
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.22/vue.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vuex/3.0.1/vuex.min.js"></script>
<div id="app">
  <InfoBar></InfoBar>
  <button @click="updateText">Update text</button>
</div>

<script type="text/x-template" id="infobar-template">
  <div>
    {{infoString}}
  </div>
</script>