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:

        }

      }).then(function (response) {

        if (response.data.code == ) {

          commit(UPDATE_PERSON, response.data.data);

        }

      });

    },

  }

　这里比较重要的就是 commit 了，可以看到在updatePerson中，我们传递的参数一般是{commit, state}，当请求结束之后，我们就可以commit了。

注意

　　在action中对commit mutations时，一般都只接受两个参数，第一个参数是 mutations 中的名称，第二个参数是我们需要向mutations传递的值，这个值往往是通过异步的http请求获得的值和其他相关值，对于传递多个参是不支持的，所以我们的做法就是将多个参数封装到多个参数中，这样不就可以了吗！！！如下所示：

if (response.data.code == ) {

              for (let i = ; 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