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

Posted 2023-02-23

【中文标题】用 mapState 和 mapMutations 替换计算的 getter/setter

【英文标题】：Replace a computed getter/setter with mapState and mapMutations

【发布时间】：2020-08-05 06:11:04

【问题描述】：

所以，我将计算值同步到组件，并在从组件同步回来时使用计算设置器设置它。

我的问题是：是否可以，或者如何以更紧凑的方式实现这一点？

<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 的计算值？

【参考方案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);
            
        
    

【参考方案2】：

这是我使用的语法：

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

不需要额外的依赖。如果你经常使用它，我想你可以为它创建一个助手，但它确实很整洁。