Vuex基础(三):mutations,actions,mapMutations,mapActions

mutations:

关于 mutations,大家需要注意的一点就是,mutations 里面的方法只能接受2个参数。

我们传参的时候并不是说,随随便便就可以传的,我们不能在后面继续加参数。

可以看到,我们是拿不到 num2 的。

因为在 Vue 里面,mutations 它接收的第二个参数只能是 object,他没有第三个参数。

如果你要传多个数据的话,你只能把它包装成一个对象,然后通过解构的方式拿到它。

所以,我们在调用 commit 方法的时候,它只能接收2个参数。

第一个参数就是 mutations 的名称,第二个参数就是一个对象,你没有第三个参数可以传。

mutations 是我们专门用来去修改state里面数据的。

那么 Vue 官方推荐,就是你所有 state 的修改,都要放在 mutations 的方法里面去做。

但实际上你是可以在外面去修改这个数据的:

我们可以看到,在外面我们也是可以修改的,但是 Vue 它不推荐我们这么去做。

我们使用 Vuex 主要的目的也是希望我们去规范整个数据的修改。

所以如果我们要进行一个限制,我们可以在 new Vuex.Store() 的时候做:

我们可以看到,虽然他还是修改成功了,但是有了警告至少我们可以知道这么写是不对的。

但是 strict 不要在正式环境去使用,我们可以在开发中去使用,规范每个开发人员的代码,但是正式环境中要记得关掉。

我们可以使用 process.env.NODE_ENV 来判断:

我们要去修改一个数据,尽量都把它放到 mutations 里面去做,因为这是一个代码规范的问题。

而且如果你在外面随便修改这个 store 里面的 state,那么你用这个 state 的意义也就没有了。

actions:

首先我们和之前一样新建文件夹和文件:

actions 里面的方法接收的第一个参数是 store,也就是整个vuex的对象。

第二个参数和 mutations 一样,也只能传一个参数,如果要传很多参数的时候,要把他封装成一个对象再传进来。

那么既然 actions 跟 mutations 一样,都是用来去修改数据的,那为什么我们要有 actions 的存在呢?

因为我们的 mutations 是必须要同步操作的。也就是说你不能有异步的代码写在 mutations 里面。

如果你要去写一个异步的代码,你必须把它放到 actions 里面去写。

actions 基本上,按照 Vuex 现在的分类来讲,它就是用来处理一些异步修改数据的方法。

我们同步的修改数据,你可以直接放在 mutations 里面,然后直接去通过 commit 方法调用。

然后我们要异步的去修改数据,就需要在 actions 里面去写了。

dispatch 是专门用来触发 actions 的,它对应的就相当于我们触发 mutations 要用到的 commit。

我们可以看到,过了2秒之后就打印出了123。

这就是 actions 的用处,你可以简单的理解为有异步代码的,就写在 actions 里面。

比如说数据请求,这种类型去修改 store 里面的数据,那么我们要写在 actions 里面,如果是同步的写在 mutations 里面就可以了。

简写方式:

和 mapState,mapGetters 一样,我们有对应的 mapMutations 和 mapActions。

mapMutations 和 mapActions 他们对应的是操作,那么操作我们肯定是要写在 methods 里面,使用方法就和之前都是一样的。

这就是 mapMutations 和 mapActions 的用法。

他们的好处就是,我们在调用的时候就不需要再去传名字了。

然后你可以根据自己的需要,在你的 methods 里面去建立一个方法的对应关系,都是可以方便自己去操作的。

发布了61 篇原创文章 · 获赞 3 · 访问量 4395

猜你喜欢

转载自blog.csdn.net/weixin_43921436/article/details/98107317