Vue Computed не может получить атрибуты в объекте

Question

Счета к определению 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

Вы не можете определять вычисляемые геттеры с точечной нотацией, как вы можете наблюдать. Вот скрипка того, что не работает, где вы можете увидеть ошибку в консоли:

Невозможно прочитать свойство 'reference' из undefined.

Кроме того, похоже, что вы пытаетесь определить вычисляемое свойство, которое уже существует, как свойство, определенное в data метод. В этой скрипке вы можете видеть, что это тоже не сработает. Значение, определенное в 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>