Question

我使用Vue（最新）来渲染选择页面。组件必须通信，所以我也使用vuex。在Vuex：

Vue.use(Vuex); //Use the Vuex state manager
const store = new Vuex.Store({
  state: {
    cparr: [],
    current_entry: {},
  },
  mutations: {
    clearAllPoints: function(state) {
      console.log("Removing ALL Points");
      state.cparr = [];
      console.log("FINISHED Removing ALL Points");
    },
  },
});

用户选择区域，每个区域可以有几百个点，所选区域在另一个div /组件中显示其选定的点。没问题。

用户可以“清除所有点”。这使用vuex设置“state.cparr = [];”

这是通过“计算”函数/方法呈现的：

  computed: {
    points: function() {
      return this.$store.state.cparr;
    },
  },

......这一切都很有效，直到几天前，我做了一些完全不相关的变化。

它仍然有效。现在只需要2-3分钟就可以进行更改。

我试过“这个。$ forceUpdate（）”。我添加了日志记录到方法：

clearAllPoints: function() {
  console.log("Start force update clearAllPoints");
  this.$store.commit('clearAllPoints');
  this.$forceUpdate();
  console.log("FINISH force update clearAllPoints");
},

立即显示控制台日志消息。没有错误报告。没有任何事情发生，直到2分钟，然后积分消失。

我尝试添加：key＆amp; ：模板中的id：

    <table class="selected-points-table">
      <tr><th>Module Name</th><th>Case Name</th><th>Point Name</th>
        <th @click="clearAllPoints" title="Remove all selected points" class="pseudo-link">Remove All</th></tr>
        <tr v-for="(point, 

pdx) in points" :key="point.point_guid" :id="'point-id-'+point.point_guid">

...并且在NOTHING的2分钟重新渲染时间内没有变化。

任何想法我可能做错了什么，或任何诊断建议？

谢谢，

克里斯

Vue v-for update SO SLOW

0 个答案: