用mapState和mapMutations替换计算的gettersetter。

Question

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

我的问题是：是否可以用mapState和mapMutations来替换计算出的gettersetter，或者如何以更紧凑的方式来实现？

<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"]) 地图 this.globalSuccess(value) 到 this.$store.commit('globalSuccess', value) 根据 vuex的文件.

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

你知道这怎么可能吗？还是说我只能使用计算值与getter和setter？

Answer 1

所以，我刚刚发现了这个vuex模块 https:/github.commaoberlehnervuex-map-fields。 我按照上面的描述进行了安装。

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

然后我利用 mapFields 函数，这显然是动态地映射到一个计算过的setter和getter上，完全符合我的要求。

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