前端圈

分享与交流前端开发相关知识

Vuex初学者

这是我之前发表的有关首次使用Vuex 文章的延续我只会谈论将您的吸气剂,变异和操作从Vuex存储映射到Vue组件中的属性。

我为什么要映射它们?

使用Vuex一段时间后,您可能会想-“我可以很好地使用突变或动作。为什么要映射它们?”。好吧,如果您要使用多个吸气剂,突变或动作,则对它们进行映射将非常有帮助。

映射吸气剂

我们以这种方式在我们的计算属性内使用吸气剂:

computed: {
    newValue() {
        return this.$store.getters.newValue;
    }
}

现在,为5个吸气剂或10个吸气剂进行此操作怎么样?它占用很多行,更不用说必须编写很多代码了。您可以使用mapGettersVuex 的帮助程序来缩短它。如果要格式化一个getter的返回值或对其进行一些其他操作,则可能必须如上所述编写getter。但是,如果计算所得的属性只是简单地从getter返回值,则最好使用mapGetters辅助方法:

import { mapGetters } from 'vuex';

export default{
    computed: {
        ...mapGetters([
            'newValue',
            'getCubeValue'
        ])
    }
}

这与编写相同:

export default {
    computed: {
        newValue() {
            return this.$store.getters.newValue;
        },
        getCubeValue() {
            return this.$store.getters.getCubeValue;
        }
    }
}

我们将一个数组传递给,mapGetters并在其中写入吸气剂的名称。您只需要输入吸气剂的名称,然后在模板中使用它们即可。无需编写其他任何内容。如果要使用其他名称的getter,则mapGetters可以将对象传递给:

import { mapGetters } from 'vuex';

export default {
    computed: {
        ...mapGetters({
            value: 'newValue',
            cube: 'getCubeValue'
        })
    }
}

如果不使用mapGetters这些getter,将以这种方式编写:

export default {
    computed: {
        value() {
            return this.$store.getters.newValue;
        },
        cube() {
            return this.$store.getters.getCubeValue;
        }
    }
}

映射突变

就像我们对吸气剂所做的一样,我们也可以对突变进行同样的处理。与相似mapGetters,我们有mapMutations用于映射突变的辅助工具。

import { mapMutations } from 'vuex';

export default {
    methods: {
        ...mapMutations([
            'calculatePercentage',
            'incrementAmount',
            'increasePrincipalBy'
        ])
    }
}

mapMutations帮助程序还支持传递有效载荷。最后一个突变,increasePrincipalBy接受有效载荷。映射我们的突变calculatePercentageincreasePrincipalByincrementAmount在方法属性将产生相同的结果中明确承诺突变:

export default {
    methods: {
        calculatePercentage() {
            this.$store.commit('calculatePercentage');
        },
        incrementAmount() {
            this.$store.commit('incrementAmount');
        },
        increasePrincipalBy(amount) {
            this.$store.commit('increasePrincipalBy', amount);
        }
    }
}

我们也可以mapMutations像处理对象一样将对象传递给助手mapGetters

import { mapMutations } from 'vuex';

export default {
    methods: {
        ...mapMutations({
            getPercentage: 'calculatePercentage',
            add: 'incrementAmount'
        })
    }
}

这就是我们如何编写上面映射的突变而不映射它们的方式:

export default {
    methods: {
        getPercentage() {
            this.$store.commit('calculatePercentage');
        },
        add() {
            this.$store.commit('incrementAmount');
        }
    }
}

映射动作

到现在为止,您必须已经了解映射获取方法,变异和操作在语法上非常相似。在将变异和动作映射到方法时,可以将获取方法映射到已计算的属性。映射动作类似于映射突变,只是所使用的帮助程序有所不同。

尽管我展示了将对象和数组分别传递给助手的示例,但我们可以同时使用它们:

import { mapActions } from 'vuex';

export default {
    methods: {
        ...mapActions([
            'incrementAsync',
            'getUsers',
            'addUser'
        ]),
        ...mapActions({
            authenticate: 'checkLogin'
        })
    }
}

在此,该addUser动作是接受有效载荷的动作。现在,如果我们在不使用mapActions帮助程序的情况下编写这些代码,则它们将像这样编写:

export default{
    methods: {
        incrementAsync() {
            this.$store.dispatch('incrementAsync');
        },
        getUsers() {
            this.$store.dispatch('getUsers');
        },
        addUser(user) {
            this.$store.dispatch('addUser', user);
        },
        authenticate() {
            this.$store.dispatch('checkLogin');
        }
    }
}

如前所述,可以在同一方法属性中同时使用传递对象和传递数组的两种方式。我通过动作助手显示了它,但也可以针对突变来完成。

包起来

这就是本文。映射您的动作,获取器和变异将使您的代码更小,并节省一些编写时间。与往常一样,您可以从Vuex docs了解更多信息。如果您有任何疑问或建议,请随时在下面的评论中留下。

点赞

发表评论

电子邮件地址不会被公开。 必填项已用*标注