2

我正在使用 Vuex,我创建了一个名为 Claims 的模块,如下所示:

import to from 'await-to-js'
import { functions } from '@/main'
import Vue from 'vue'

const GENERATE_TX_SUCCESS = 'GENERATE_TX_SUCCESS'
const GENERATE_TX_ERROR = 'GENERATE_TX_ERROR'

export default {
  state: [ ],
  mutations: {
    [GENERATE_TX_SUCCESS] (state, generateTxData) {
      state.push({ transaction: { ...generateTxData } })
    },
    [GENERATE_TX_ERROR] (state, generateTxError) {
      state.push({ transaction: { ...generateTxError } })
    }
  },
  actions: {
    async generateTx ({ commit }, data) {
      const [generateTxError, generateTxData] = await to(functions.httpsCallable('generateTx')(data))
      if (generateTxError) {
        commit(GENERATE_TX_ERROR, generateTxError)
      } else {
        commit(GENERATE_TX_SUCCESS, generateTxData)
      }
    }
  },
  getters: { }
}

然后,在 .vue 组件中,我确实有这个手表:

 watch: {
    claims: {
      handler (newTxData, oldTxData) {
        console.log(newTxData)
      }
    }
 }

我在这里面临的问题是 newTxData 与 oldTxData 相同。

据我了解,由于这是一个推送并且它检测到更改,所以它不是这些警告之一:https ://vuejs.org/v2/guide/list.html#Caveats

所以基本上问题是这个:

注意:当改变(而不是替换)对象或数组时,旧值将与新值相同,因为它们引用相同的对象/数组。Vue 不保留 pre-mutate 值的副本。

https://vuejs.org/v2/api/#vm-watch

那么我的问题是:我应该如何在突变中解决这个问题?

编辑

我也尝试过,Vue.set(state, state.length, generateTxData)但得到了相同的行为。

编辑 2 -临时解决方案- (性能不佳):

我正在使用vuexfire 使@matthew(感谢 @Jacob Goh)适应我的解决方案:

computed: {
  ...mapState({
    claims: state => cloneDeep(state.claims)
  })
},
4

2 回答 2

8

这个答案基于@matthew 这个非常聪明的答案

您将需要lodash cloneDeep功能

基本上,创建一个这样的计算值

computed: {
    claimsForWatcher() {
        return _.cloneDeep(this.claims);
    }
}

发生的情况是,每次推入一个新值claimsclaimsForWatcher都会成为一个全新的对象

因此,当您观看时claimsForWatcher,您将不会再遇到“旧值将与新值相同,因为它们引用相同的对象/数组”的问题。

watch: {
    claimsForWatcher(oldValue, newValue) {
        // now oldValue and newValue will be 2 entirely different objects
    }
}

警告:随着数据的增长,这会带来性能成本

于 2018-06-05T09:35:33.707 回答
-1

您可以将状态分配给新对象:

  mutations: {
    [GENERATE_TX_SUCCESS] (state, generateTxData) {
      state = [
         ...state,
         { transaction: { ...generateTxData } }
      ]
    },
    [GENERATE_TX_ERROR] (state, generateTxError) {
      state = [
         ...state,
         { transaction: { ...generateTxError } }
      ]
    }
  }
于 2018-06-04T17:02:19.043 回答