Vue：为什么这个计算属性不是响应式的？答案

【问题标题】：Vue: Why is this computed property not reactive?Vue：为什么这个计算属性不是响应式的？
【发布时间】：2018-12-18 23:33:31
【问题描述】：

这是一个来自 vue 组件的计算 getter 和 setter：

paidStartHours : {
    get() {
        return moment(this.position.paid_start, global.DB_DATETIME).format('HH');
    },
    set(value) {
        this.$store.commit({
            type : 'updatePaidStartHours',
            newValue : value,
            position : this.position
        });
    }
}

在获取时，它从 position.paid_start 返回小时 (HH)。在片场，它提交了一个存储突变，本质上是为position.paid_start重新创建时间字符串。

In 被绑定（双向）到一个输入，如下所示：

<input v-model="paidStartHours" type="text">

在初始加载时，计算属性 paidStartHours 是正确的（根据 Vue 工具）。

但是，当我更新输入时，paidStartHours 的值不会改变。我知道提交是成功的，因为交给组件的道具是正确的。这对我来说毫无意义。

编辑：

updatePaidStartHours 突变中的代码已更改多次。例如，我试过这个：

updatePaidStartHours(state, payload) {
    payload.position.paid_start = 999;
}

传递的 prop 的值更改为 999，但计算的 prop 的值保持不变。

编辑二：

我认为不值得尝试解决这个问题，因为我认为我的整个 Vue / Webpack / Node 安装非常糟糕。例如，今天早上我很高兴地按照这个答案，Vuejs and Webpack: Why is store undefined in child components，将一个实例化的商店导入我的应用程序。一切看起来都很好，但经过大约 8 小时的填充后，我发现没有商店属性是反应性的。我恢复到只导入配置，现在我的大多数商店属性都是反应性的，但遗憾的是不是上面的那些。我想我需要放弃这种方法，直到我有时间重新审视我的 Vue / Webpack / Node 安装并重新开始。

【问题讨论】：

你能显示你的updatePaidStartHours 突变代码吗？
@ittus，查看编辑标题。
你没有改变vuex的状态？是this.position.paid_start = 999;吗？
没错@ittus。 this.position 是对 store 中一个对象的引用，见stackoverflow.com/questions/51257306/…
您的组件从哪里获得position.paid_start？它是如何设置的？

标签： vue.js

【解决方案1】：

Vuex 突变应该只从 Vuex 动作中调用——所以在你的代码中你应该调度一个动作，而不是一个突变。此外，您的变异函数预计会变异 store 参数 - 而不是 payload 一个。您的 getter 也是错误的 - 它应该使用 this.$store.getters 而不是您的本地组件数据。

paidStartHours : {
    get() {
        return moment(this.$store.getters.position.paid_start, global.DB_DATETIME).format('HH');
    },
    set(value) {
        this.$store.dispatch('updatePaidStartHours',value);
    }
}

Vuex 模块：

// initial state
const state = {
  position:
  {
    paid_start: null
  }
};

// getters
const getters = {
  position: (state) => state.position
}

// actions
const actions = {
  updatePaidStartHours ({commit}, payload)
  {
    commit('SET_START_HOURS', payload);
  }
}

// mutations
const mutations = {
  SET_START_HOURS (state, payload)
  {
    state.position.paid_start = payload;
  }
}

【讨论】：