如果未绑定到组件数据，如何设置计算属性值

Question

我有一个组件有一个计算的属性，它从 Vuex 存储中获取它的值，如下所示：

computed: {
  details () {
    return this.$store.getters.getDetails
  }
}

getDetails getter returns 具有多个属性的对象。现在的问题是，如何在定义它的组件中更新 'details' 对象的属性？如果是通过 UI，那么它可以通过 v-model 完成。但它需要通过组件的方法来完成。像下面这样：

methods: {
  someMethod () {
    // here I need to update props of 'details' object, but how?
  }
}

Answer 1

既然你在使用 Vuex，那就在商店里做吧。

假设您的 details 对象是这样的：

details: { foo: 1, bar: 2 }

然后在state中添加修改details对象的mutation（我用and因为不知道你是不是只想修改属性的一个details 或实际上想为其分配一个新对象):

Vue.use(Vuex)

const store = new Vuex.Store({
  state: {
    details: { foo: 1, bar: 2 }
  },
  getters: {
    getDetails: (state, getters) => {
      return state.details;
    }
  },
  mutations: {
    UPDATE_DETAILS (state, payload) {
      this.$set(state.details, payload.key, payload.val)
    },
    REPLACE_DETAILS (state, payload) {
      state.details = payload
    }
  }
});

然后在你的组件中：

// ...
methods: {
  // ...
  updateDetails(key, val) {
    this.$store.commit('UPDATE_DETAILS', { key, val });
  },
  replaceDetails(obj) {
    this.$store.commit('UPDATE_DETAILS', obj);
  }
}

更新：我所说的基本上是对@Bert 在他的评论中试图表达的内容的更长解释。

如果未绑定到组件数据，如何设置计算属性值

How to set computed property a value if it's not bound to component's data

vuejs2

vuex

如果未绑定到组件数据，如何设置计算 属性 值

How to set computed property a value if it's not bound to component's data

vuejs2

vuex

如果未绑定到组件数据，如何设置计算属性值