时间戳

首页 > 解决方案 > Vue：为什么这个计算属性不是响应式的？

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

在获取时，它从 . 返回小时 (HH) position.paid_start。在片场，它提交了一个存储突变，它基本上重新创建了时间字符串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 , to import an instantiated store into my App. 一切看起来都很好，但经过大约 8 小时的填充后，我发现没有商店属性是反应性的。我恢复到只导入配置，现在我的大多数商店属性都是反应性的，但遗憾的是不是上面的那些。我认为我需要放弃这种方法，直到我有时间重新审视我的 Vue / Webpack / Node 安装并重新开始。

标签： vue.js

解决方案

Vuex 突变应该只从 Vuex 动作中调用——所以在你的代码中你应该调度一个动作，而不是一个突变。此外，您的突变函数预计会改变store参数 - 而不是那个payload。您的吸气剂也是错误的 - 它应该使用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;
  }
}

推荐阅读