Vuex突变目标传递给有效负载,而不是在状态下寻找它

时间:2018-08-01 15:56:25

标签: vue.js vuejs2 vue-component vuex

假设vuex状态的结构如下:

state: {
        houses: [{
            pk: 1,
            historicalName: 'Poo'
        }],
    },

状态中的house实例通过将其作为道具传递给组件(houses.vue模板)来使用:

<div><house v-for="hs in housesState" :house="hs"></house></div>

然后,当我需要对house的字段进行突变时,是否要这样写突变:

[Types.mutations.SET_HISTORICAL_NAME]: (state, payload) => {
   state.houses.find(x => x.pk === payload.house.pk).historicalName = payload.historicalName
}

还是我从组件

传递house的实例
this.$store.commit(Types.mutations.SET_HISTORICAL_NAME, {house: this.house, historicalName: 'Gold'})

并在不搜索数组的情况下更新它?

[Types.mutations.SET_HISTORICAL_NAME]: (state, payload) => {
       payload.house.historicalName = payload.historicalName
}

第二个选项会导致状态锁定吗?可以同时为不同的houses调用突变。会更快吗?并非每次都搜索数组都会有所帮助,但我不确定这里是否很简单。

内部数据也被其他组件使用(我在问题中简化了数据结构),所以我认为我只能在本地组件级别存储house

0 个答案:

没有答案