vue computed 无法获取对象中的属性

Question

// inside mutations
mutations: {
  updateMessage (state, message) {
    state.obj.message = message
  }
}
// html
<input v-model="message">
// ...
computed: {
  message: {
    get () {
      return this.$store.state.obj.message
    },
    set (value) {
      this.$store.commit('updateMessage', value)
    }
  }
}

然后我编写代码

<input type="text" v-model="data.reference">
data () {
    return {
      data:{
          ...
          reference: '',
      }
    }
  },
computed: {
    'data.reference':{
        get () {
            return this.$store.state.currentKbdata.reference
        },
        set (value) {
            console.log(222)
            this.$store.commit('updateReference', value)
        }
    }
  }

当我输入时，222 没有显示

................................................ .....................

Answer 1

您不能像观察者那样用点符号定义计算的 getter。这是一个无法正常工作的 fiddle，您可以在其中看到控制台中的错误：

Cannot read property 'reference' of undefined.

此外，您似乎正在尝试定义一个已存在的计算属性作为 data 方法中定义的属性。在这个 fiddle 中，您可以看到那也行不通。 data 方法中定义的值优先于计算的属性定义。

无论如何，根据您的示例，我根本不明白您为什么需要在嵌套对象属性上创建计算属性。

只需对计算值使用普通定义属性:

const store = new Vuex.Store({
  state: {
    reference: '',
  },
  mutations: {
    updateReference(state, reference) {
      state.reference = reference;
    }
  }
});

new Vue({
  el: '#app',
  store,
  computed: {
    reference: {
      get() {
        return this.$store.state.reference;
      },
      set(val) {
       this.$store.commit('updateReference', val);
      }
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vuex/3.0.1/vuex.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.15/vue.min.js"></script>

<div id="app">
  <input type="text" v-model="reference">
  {{ $store.state.reference }}
</div>

如果您确实需要设置 data.reference 的值，那么有很多方法可以实现。一种方法是将它也变成计算的属性：

const store = new Vuex.Store({
  state: {
    reference: '',
  },
  mutations: {
    updateReference(state, reference) {
      state.reference = reference;
    }
  }
});

new Vue({
  el: '#app',
  store,
  computed: {
    reference: {
      get() {
        return this.$store.state.reference;
      },
      set(val) {
       this.$store.commit('updateReference', val);
      }
    },
    data() {
      return { reference: this.reference };
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vuex/3.0.1/vuex.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.15/vue.min.js"></script>

<div id="app">
  <input type="text" v-model="reference">
  <div>data.reference: {{ data.reference }}</div>
  <div>$store.state.reference: {{ $store.state.reference }}</div>
</div>

vue computed 无法获取对象中的属性

vue computed cannot get the the attributes in the object

vue.js

vuex