vue之mapMutaions的使用 && vuex中 action 用法示例 && api.js的使用
vue之mapMutations的使用
我们通过Mutation来改变store中的state,方法往往是在子组件中使用 this.$store.commit(); 来实现,但是这样的缺点是不容易查看,并且每次在调用Mutations时都需要添加 $store, 为了方便我们的开发,所以可以使用 mapMutations ,正如对于state, 我们可以使用 mapState 是一样的 。
首先,在mutation-type.js 中的内容大致如下:
export const INCREMENT_NUMBER = "INCREMENT_NUMBER" export const DECREMENT_NUMBER = "DECREMENT_NUMBER" export const INCREMENT_PRICE = "INCREMENT_PRICE" export const DECREMENT_PRICE = "DECREMENT_PRICE" export const UPDATE_MALL = "UPDATE_MALL" export const UPDATE_PERSON = "UPDATE_PERSON" export const UPDATE_CONTENT = "UPDATE_CONTENT" export const UPDATE_KINDS = "UPDATE_KINDS"
使用大写,这样我们可以更容易进行区分。
接着,我们引入:
import { INCREMENT_NUMBER, DECREMENT_NUMBER, INCREMENT_PRICE, DECREMENT_PRICE, UPDATE_MALL, UPDATE_PERSON, UPDATE_CONTENT, UPDATE_KINDS } from './mutation-types.js'
然后就可以在 store 实例下定义了:
mutations: { [INCREMENT_NUMBER] (state) { state.totalNumber++; }, [DECREMENT_NUMBER] (state) { state.totalNumber--; }, [INCREMENT_PRICE] (state, unitPrice) { state.totalPrice += unitPrice; }, [DECREMENT_PRICE] (state, unitPrice) { state.totalPrice -= unitPrice; },
完成了这些基本工作之后,我们就可以在组件中使用:
import {mapMutations} from "vuex"
然后在 methods 下定义,例如:
...mapMutations([ 'UPDATE_CONTENT', "UPDATE_KINDS" ]),
这样,我们在使用的时候,用this即可。
that.UPDATE_CONTENT(response.data.data);
这里使用了that是因为,如果使用this指向的不是vue实例,之前我们会 var that = this; 这样就没有问题了 。
vue中action的用法
在知乎上,有人问了这么一个问题:
这个问题问的非常好! 额,因为这就是我想问的问题。。。
有以下几种解决方式:
第一:
最高票答案的方法是把所有和服务器端的交互都写在 actions 中, 而业务代码里,就只有对actions的异步操作。
也就是说: axios相关代码写在actions中, 在.vue文件中来触发actions。
总体的设计原则是actions是异步的,用来处理业务逻辑的, 而mutation只是简单的对state的状态进行改变。
以上是说第一个问题。
而第二个问题最高票认为: 先处理好返回数据,然后将返回数据触发 mutations。
你可以把state 理解为前端的共用数据库, mutations 这些是增删改,getters 是查,所以mutations 里的逻辑应该是越少越好。
第二:
有人建议新建一个service层(当然是在src中),在其中添加一个api.js(或者getData.js)用于请求数据。 然后将接口导出即可。
我的观点: 不管是哪种原则,其实都是为了方便我们进行编码而设计的, 并且我单独列出来上述答案,是因为我觉得他们有相同之处, 比如我们确实应当将异步的请求写在actions中,而actions中如果写了太多的 axios 请求逻辑也会显得十分繁琐,所以,我们这时就需要添加一个 service 层,该层中添加 api.js ,用于调用其中的接口。 参考代码
好处:
- 如果需要改请求,我们直接进入service层进行修改即可。
- 如果需要修改异步调用,直接进入actions中修改即可。
即通过代码的有效整理后,逻辑性更加清楚, 而不会造成混乱。
vue中mapActions的使用
使用mapActions的方法大致和mapMutations的方法相同,现在简单介绍如下。
我们知道使用actions的目的就是用来处理异步的操作。
比如: 我们获取一个用户信息,使用axios发送http请求,这里使用actions。
第一: 因为actions的本质是提交mutations,所以:
import { UPDATE_PERSON, } from './mutation-types.js'
然后:
mutations: { [UPDATE_PERSON] (state, curPerson) { state.curPerson = curPerson; }, },
这样,mutations 的相关工作就做好了。
第二:定义actions, 使用action, 方法中一般都是要有异步的请求的,否则就没有使用action的必要了.
actions: { updatePerson ({commit, state}) { axios.get('/bbg/user/user_base_info', { params: { uid: 22478849 } }).then(function (response) { if (response.data.code == 8) { commit(UPDATE_PERSON, response.data.data); } }); }, }
这里比较重要的就是 commit 了,可以看到在updatePerson中,我们传递的参数一般是{commit, state}, 当请求结束之后,我们就可以commit了。
注意
在action中对commit mutations时,一般都只接受两个参数,第一个参数是 mutations 中的名称,第二个参数是我们需要向mutations传递的值,这个值往往是通过异步的http请求获得的值和其他相关值,对于传递多个参是不支持的,所以我们的做法就是将多个参数封装到多个参数中,这样不就可以了吗!!! 如下所示:
if (response.data.code == 626) { for (let i = 0; i < response.data.data.length; i++) { console.log(response.data.data[i], index); var obj = { index: index, item: response.data.data[i] }; commit(UPDATE_ALL_CONTENT, obj); } index++; resolve(); }
第三: 使用
import {mapActions} from "vuex"
同mapMutations一样,先从vuex中引入。
在methods下设置:
methods: { ...mapActions([ 'updatePerson' ]),
最后,当用户点击按钮或。。
getPerson: function () { this.updatePerson(); }
即直接使用 this.updatePerson() 来调用。 和 mutations 的调用非常类似,只是actions在中间加了一层异步的方法。
说明: 使用actions时也是可以传递参数的,比如这里: this.updatePerson("参数"), 然后updatePerson ({commit, state}, str) 这种形式就可以接收到参数了。
当然可以也是可以传递payLoad的,比如 updatePerson({commit, state}, payload) 然后我们在函数中使用payload.foo、payload.bar即可。
参考代码:
https://github.com/bailicangdu/vue2-elm/tree/master/src
https://github.com/bailicangdu/vue2-elm/blob/master/src/page/confirmOrder/confirmOrder.vue
参考文章:
https://www.zhihu.com/question/57133837