首页 文章

Vue:为什么这个计算属性不被反应?

提问于
浏览
2

这是来自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上,它返回 position.paid_start 的小时数(HH) . 在set上,它提交了一个商店变异,它实质上为 position.paid_start 重新创建了时间字符串 .

In绑定(双向)输入如下:

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

在初始加载时,计算属性 paidStartHours 是正确的(根据Vue工具) .

但是,当我更新输入时, paidStartHours 的值不会改变 . 我知道提交是成功的,因为传递给组件的道具是正确的 . 对我来说完全是无稽之谈 .

编辑:

updatePaidStartHours 突变中的代码已经多次更改 . 例如,我试过这个:

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

传递的道具的值变为999,但计算的道具的值保持不变 .

编辑二:

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

1 回答

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

相关问题