用 mapState 和 mapMutations 替换计算的 getter/setter

Question

因此，我正在将一个计算值同步到一个组件，并在它从组件同步回来时用一个计算值 setter 设置它。

我的问题是：是否可以用 mapState 和 mapMutations 替换计算的 getter/setter 或者如何以更紧凑的方式实现这一点？

<template>
    <SomeComponent :value.sync="globalSuccess"></SomeComponent>
</template>
export default {
    //...
    computed: {
        globalSuccess: {
            get() {
                return this.$store.state.globalSuccess;
            },
            set(val) {
                this.$store.commit("globalSuccess", val);
            }
        }
    }
}

我试过这样替换它：

export default {
    //...
    computed: {
        ...mapState(["globalSuccess"]),
        ...mapMutations(["globalSuccess"]),
    }
}

但不幸的是 mapMutations(["globalSuccess"]) 根据 documentation of vuex.

将 this.globalSuccess(value) 映射到 this.$store.commit('globalSuccess', value)

但是由于我的计算值是通过模板中的 :value.sync 在内部设置为 globalSuccess = true 而不是 this.globalSuccess(true)，因此 globalSuccess 永远不会设置为 true.

知道这怎么可能吗？或者我是否坚持使用 getter 和 setter 的计算值？

Answer 1

所以我刚刚发现了这个 vuex 模块https://github.com/maoberlehner/vuex-map-fields，我按照那里的描述安装了它：

// store.js
import { getField, updateField } from 'vuex-map-fields';
Vue.use(Vuex);
export default new Vuex.Store({
    getters: {
        getField,
        //...
    },
    mutations: {
        updateField,
        //...
    },
});

然后我使用了mapFields函数：

// App.vue
export default {
    //...
    computed: {
        ...mapFields(["globalSuccess"]),
    }
}

这显然完全按照我的需要动态映射到计算的 setter 和 getter:

export default {
    //...
    computed: {
        globalSuccess: {
            get() {
                return this.$store.state.globalSuccess;
            },
            set(val) {
                this.$store.commit("globalSuccess", val);
            }
        }
    }
}

Answer 2

这是我使用的语法：

export default {
  //...
  computed: {
    globalSuccess: {
      ...mapState({ get: 'globalSuccess' }),
      ...mapMutations({ set: 'globalSuccess' }),
    },
  },
}

不需要额外的依赖项。如果你经常使用它，我想你可以为它创建一个帮助程序，但它实际上非常整洁。

用 mapState 和 mapMutations 替换计算的 getter/setter

Replace a computed getter/setter with mapState and mapMutations

javascript

vue.js

computed-properties

vue-component

vuex