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

无法读取属性＆＃39;引用＆＃39;未定义的。

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

无论如何，从你的例子中，我不知道为什么你需要在嵌套对象属性上创建一个计算属性。

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

＆＃13;

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);
      }
    }
  }
})

＆＃13;

<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>

＆＃13;

如果您确实需要设置data.reference的值，那么有很多方法可以实现这一点。一种方法是将其转换为计算属性：

＆＃13;

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 };
    }
  }
})

＆＃13;

<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>

＆＃13;

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

1 个答案: