2方式绑定与对象内的嵌套属性。 (VueJS + VueX)

时间:2017-10-17 16:07:30

标签: javascript vue.js vuex

我目前正在做以下事情:

<script>
export default {
  computed: {
    editingItem: {
      get() {
        return this.$store.getters['editing/editingItem'];
      },
      set(newValue) {
        this.$store.commit('editing/UPDATE_EDITING', newValue);
      }
    },
    editingItemName: {
      get() {
        return this.editingItem.name;
      },
      set(newValue) {
        this.editingItem.name = newValue;
        this.editingItem = this.editingItem;
      }
    }
  },
}
</script>

我过度复杂了吗? editingItemName set()的第二行是使editItem set()函数触发的解决方法。

1 个答案:

答案 0 :(得分:1)

Check this article。它是关于形式的,但它显示了用vuex实现双向绑定的方法。

关于您的特殊情况,请参阅代码。 telephone是对象内的嵌套属性。

<强> myModule.js

const myModule = {
  state: {
    customerInfo: {
      name: '',
      telephone: ''
    }
  },
  getters: {
    getTelephone(state) {
      return state.customerInfo.telephone
    }
  },
  mutations: {
    setTelephone(state, payload) {
      state.customerInfo.telephone += payload
    },
  }
}
export default myModule;

<强> form.vue

<template>
  <div>
    <input v-model="telephone"></input>
  </div>
</template>

<script>
export default {
  computed: {
    telephone: {
      get() {
        return this.$store.getters['getTelephone']
      },
      set(value) {
        this.$store.commit('setTelephone', value)
      }
    },
  }
}
</script>