Question

这是来自vue组件的计算的获取器和设置器：

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 Tools）。

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

编辑：

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

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

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

编辑II：

我认为不值得尝试解决此问题，因为我认为整个Vue / Webpack / Node的安装都非常麻烦。例如，今天早上，我很高兴遵循这个答案Vuejs and Webpack: Why is store undefined in child components，将实例化商店导入到我的App中。一切似乎都很好，但是经过大约8个小时的填充，我发现没有存储属性是反应性的。我恢复为仅导入配置，现在我的大多数商店属性都是反应性的，但不幸的是上面的属性不是。我认为我需要放弃这种方法，直到我有时间重新访问Vue / Webpack / Node安装并重新开始。

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

Vue：为什么此计算属性不具有反应性？

1 个答案: