vue.js - Vue 组件在关联数据更改后不会立即更新

Question

我对 Vue 还很陌生，并且很难在连接的数据更新后让组件更新其内容。不过，该组件将在重新渲染后立即显示更改的内容。

组件

Vue.component('report-summary', {
  props: ['translation', 'store'],
  watch: {
    'store.state.currentModel.Definition': {
      handler: function(change) {
        console.log('Change detected', change);
      },
      deep:true
    }
  },
  template: '<div>
    '<div class="alert alert-secondary" role="alert">' +
    '<h5 class="border-bottom border-dark"> {{ translation.currently_defined }}</h5>' +
    '<div>{{ store.state.currentModel.Definition.length }} {{translation.elements }}</div>' +
    '</div>' +
    '</div>'
});

store 作为页面 HTML 中的属性传入:

<report-summary :translation="t" :store="store"></report-summary>

store 本身是 Vuex.Store :

let store = new Vuex.Store({
  state: {
    t: undefined,
    currentModel: undefined
  },
  mutations: {
    storeNewModel(state) {
      let model = CloneFactory.sealedClone(
        window.Project.Model.ReportTemplateModel);
      model.Header = CloneFactory.sealedClone(
        window.Project.Model.ReportTemplateHeaderModel);
      state.currentModel = model;
    },
    storeNewModelDefinition(state, definition) {
     state.currentModel.Definition.push(definition);
    }
  }
});

在将任何数据存储到模型的 Definition 属性之前，通过调用 store.commit('storeNewModel'); 来初始化 currentModel 元素.

通过在循环中使用 store.commit('storeNewModelDefinition') 来更新定义的内容:

for (let c in this.$data.currentDefinition.charts) {
  store.commit('storeNewModelDefinition', c);
}

当调用 store.commit('storeNewModelDefinition', c); 时，商店会按预期更新:

但是组件不会对更改的数据使用react:

然后，当我导航离开(通过更改隐藏嵌入组件的 View )并再次导航到内容已更新的 View 时:

在控制台窗口中，我看到观察者在任何时间点都没有被触发:

我在这里缺少什么？非常感谢您提前让我大开眼界。

使用 EventBus

将watch切换到事件总线监听器也没有按计划工作。

这是EventBus的初始化:

window.eventBus= new Vue(); 

我将其添加到我的组件中:

  created: function() {
    window.eventBus.$on('report-summary-update', function() {
      this.$nextTick(function(){ this.$forceUpdate(); });
    });
  }

并在从列表中添加或删除元素后发出事件:

window.eventBus.$emit('report-summary-update');

当在调试器中设置断点并观察 this.$forceUpdate(); 时，我看到它也被调用，但 UI 仍然会显示旧内容，没有任何更改。我现在真的迷失了。

<小时/>

P.S.我将其交叉发布到 Vue forum但由于社区很小，希望在这里收到一些反馈。

Answer 1

将数据推送到嵌套数组总是会导致组件不更新等问题。

尝试向您的存储添加一个 getter 并使用该 getter 从存储中获取数据

let store = new Vuex.Store({
  state: {
    t: undefined,
    currentModel: undefined
  },
  mutations: {
    storeNewModel(state) {
      let model = CloneFactory.sealedClone(
        window.Project.Model.ReportTemplateModel);
      model.Header = CloneFactory.sealedClone(
        window.Project.Model.ReportTemplateHeaderModel);
      state.currentModel = model;
    },
    storeNewModelDefinition(state, definition) {
     state.currentModel.Definition.push(definition);
    }
  },
  getters:{
    definitions(state){
      return state.currentModel.Definition
    }
  }
});

在您的组件中，您可以添加一个计算属性来从存储中获取数据

Vue.component('report-summary', {
  props: ['translation', 'store'],
  computed: {
    definitions(){
     return store.getters.definitions
    }
  },
  template: '<div>
    '<div class="alert alert-secondary" role="alert">' +
    '<h5 class="border-bottom border-dark"> {{ translation.currently_defined }}</h5>' +
    '<div>{{ definitions.length }} {{translation.elements }}</div>' +
    '</div>' +
    '</div>'
});

更新(2019 年 11 月 30 日)如果上面的代码仍然不起作用，请将您的 storeNewModelDefinition 更改更改为:

storeNewModelDefinition(state, definition) {
     // Create a new copy of definitions
     let definitions = [...state.currentModel.Definition]

     // Push the new item
     definitions.push(definition)

     // Use `Vue.set` so that Vuejs reacts to the change
     Vue.set(state.currentModel, 'Definition', definitions);
    }