vue 计算无法获取对象中的属性

Question

帐号defind of vuex

// 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，您可以在控制台中看到错误：

无法读取未定义的属性“引用”。

此外，您似乎正在尝试将已存在的计算属性定义为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>