Vuex computed 属性无法绑定 Vuex 状态？解决办法在这里！

vue.js

2024-03-28 10:15:22

Vuex 中的 computed 属性：绑定限制和解决方案

问题：无法将 computed 属性绑定到 Vuex 状态

Vuex 中的 computed 属性是只读的，这意味着无法直接将它们绑定到 Vuex 状态中的数据。这可能令人沮丧，尤其是当你想在你的 Vue 组件中显示和编辑全局数据时。

解决方案：使用 mutation

为了将数据存储在 Vuex 状态中并使其可编辑，可以使用 mutation。mutation 是用来修改 Vuex 状态的函数。以下是如何使用 mutation 将值绑定到 computed 属性：

修改 computed 属性

修改你的 computed 块，如下所示：

computed: {
  name: {
    get() {
      return this.$store.state.name;
    },
    set(newName) {
      this.$store.commit('updateName', newName);
    }
  }
}

添加 mutation 到 store

添加一个 mutation 到你的 store，如下所示：

mutations: {
  updateName(state, newName) {
    state.name = newName;
  }
}

在组件中使用 mutation

在你的 Vue 组件中，你可以使用 name computed 属性来获取和更新状态：

nextStep() {
  var self = this;

  this.$validator.validateAll().then((result) => {
    if (result) {
      self.name = self.$el.querySelector('input[name="name"]').value;
      this.$store.dispatch('addContactInfoForOrder', self);
      this.$store.dispatch('goToNextStep');
      return;
    }
  });
}

现在，当你在你的表单中输入一个新的名称时，它将被存储在 Vuex 状态中，并且 name computed 属性将更新，反映出该更改。

结论

虽然 Vuex 中的 computed 属性是只读的，但可以使用 mutation 来允许你将它们绑定到 Vuex 状态。通过遵循本教程中的步骤，你可以轻松地在你的 Vue 组件中显示和编辑全局数据。

常见问题解答