Замените вычисленный метод получения / установки на mapState и mapMutations - PullRequest
Новая
       35

Замените вычисленный метод получения / установки на mapState и mapMutations

0 голосов
/ 22 апреля 2020

Итак, я синхронизирую вычисленное значение с компонентом и устанавливаю его с помощью вычисляемого установщика, когда он выполняет синхронизацию с компонентом.

Мой вопрос: возможно ли заменить вычисленный получатель / установщик на mapState и mapMutations или как можно добиться этого более компактным способом? 

<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?

1 Ответ

0 голосов
/ 22 апреля 2020

Итак, я только что узнал об этом модуле 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"]),
    }
}

По-видимому, динамически отображается на вычисляемый установщик и получатель точно так, как я хотел: 

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