vuex对象数组中的数据改变但是视图没有同步更新?

  • Z时代
  • 2024-02-27
  • 分类：IT

1.存在vuex中的数据是对象数组类型
2.数据是根据不同id切换请求的，在actions处理
3.需要替换整个对象数组数据而不是数组中某一个字段
4.数据是成功切换了，就是视图无法更新，需要刷新才能更新
请教一下各位大佬，有没有遇到这种情况。
5.视图是弹出层的table数据，用的是iview组件的table，需要更新是一个下拉框options的数据，数据成功改变了但是无法触发视图options的数据更新

state: 
    EnergySROptions: [], //格式是[{value: '',label: ''}]
mutations
setEnergySROptions(state, arr) {
      console.log(arr, 'arr');
      Vue.set(state, 'EnergySROptions', arr) //试过了无效
      state.EnergySROptions = JSON.parse(JSON.stringify(state.EnergySROptions)) //试过了无效
    }
actions
 getEnergyOptData(context) {
      let d = {
        page: 1,
        limit: 10,
        flag: 'get_IntegrityProtAlgorithm_list',
        sear: localRead('node'),
      }
      let url = "overall.cgi";
      http.common.postByUrlAndData(url, d).then((res) => {
        if (res) {
          var optionData = res.data.enum_rows;
          var EnergySROption = []
          var optionArr = optionData[0].option;
          optionArr.forEach((e) => {
            EnergySROption.push({ value: e, label: e, })
          })
          context.commit('setEnergySROptions', EnergySROption)
        }
      })
    }

回答：

很简单的一个窍门就是，你在 Vue2 中修改数组要么用 $set，要么就用 list = newList 这样的形式去做。

如果你是修改了对象数组内部某一个对象的属性，Vue 是无法感知的。因为 Store 里面修改 State 是没有 $set 这个可选项的，就需要你去用 list = newList 这种方法，并在且组件中使用时选用下面两种方式派发：

computed:{
  ...mapStates(
  // 或者
  ...mapGetters(

回答：

1.this.$forceUpdate()
2.定义一个timer绑定在视图上面<div :key="timer">.....</div>，一点击就this.timer = new Date().getTime()
上面两种方式一般这种问题都可以解决

以上是 vuex对象数组中的数据改变但是视图没有同步更新? 的全部内容， 来源链接： utcz.com/p/933197.html

回到顶部