Vue.js Vue：为什么这个计算属性不是反应性的？

以下是从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
        });
    }
}

get时，它从

位置返回小时数（HH）。付费\u开始

。在设置时，它提交了一个存储变异，它本质上为

位置.paid\u start

重新创建时间字符串

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

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

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

编辑二：

---

我认为不值得尝试解决这个问题，因为我认为我的整个Vue/Webpack/Node安装都非常糟糕。例如，今天早上我很高兴地遵循这个答案，将一个实例化的商店导入到我的应用程序中。这一切似乎都很好，但经过大约8个小时的填充后，我发现没有商店的属性是反应性的。我恢复到只导入配置，现在我的大多数存储属性都是被动的，但遗憾的是，不是上面的属性。我认为我需要放弃这种方法，直到我有时间重新访问我的Vue/Webpack/Node安装并重新开始。

Vuex突变应该只从Vuex操作调用-因此在代码中应该调度一个操作，而不是突变。另外，您的变异函数应该变异

存储

参数，而不是

有效负载

参数。您的getter也是错误的-它应该使用

this.$store.getter

而不是本地组件数据

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

---

你能显示你的

updatePaidStartHours

变种的代码吗？@ittus，请查看编辑标题。你没有更改vuex的状态吗？是不是

this.position.paid\u start=999？没错@ittus。this.position是对商店中某个对象的引用，请参见您的组件从何处获得位置.position\u start

？如何设置？

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