Vuex在工程项目中的使用

本文旨在阐明在工程项目中如何使用Vuex(如何念？)。阅读本文前，请先熟悉Vuex的官方教程。

1.Vuex组织方式

工程应用中通过modules的方式来组织Vuex内的状态。一个module可能对应一个页面（例如考试详情页）或一个逻辑模块（如用户模块，包含所有有关用户信息的状态）。通过module的方式组织代码能够在一定程度上避免在多人开发情景中代码冲突的不悦和风险。

在文件组织上的形式如下图所示：

2.type的命名方式

Vuex在调用actions、mutations、getters时是通过它们的名称（Vuex称之为“type”）来调用的。type是全局的，即使是以module的方式组织代码，也可能会有type名冲突的情况。因此我们会考虑使用一定的命名方式来定义type。

命名方式是：

以常量的形式命名，即以大写字母组织，以下划线分隔单词；
第一个单词是当前Vuex module名；
第二个单词是动作名称。常用的是set（设置）、FETCH（拿取）、DEL（删除）、GET（获取）等。
第三个单词一般是动作的施予对象，常为state中某个状态的名字。
ganbinjun > Vuex在工程项目中的使用 > image2018-5-28_12-25-32.png

3.Vuex中组成部分的调用方式

3.1 Mutations

需要强调，修改Vuex state里的状态时，必须通过mutation。mutation里是同步的操作。
根据以上的命名方式，我们在定义mutation时大概的样子是：

其中，’QUESTION_SET_LIST’是该mutation的名字。需要注意的是，在函数内部，我们将list赋值给state.list时采用了一种防御的方式，使list如果传入一个假值（例如 undefined）时仍能使state.list维持一个正常的值，避免不符合预期的行为。例如，组件内使用了state.list，并将该变量当做数组使用:

// 在组件内
this.$store.state.list.forEach(item => {})

如果在mutation里将state.list置成了undefined，则以上代码会报错。
组件中使用
在组件中使用mutation有两种方式，详情参考文档。

this.$store.commit(‘MUTATION_NAME’); 
mapMutations([’NAME1, NAME2'])

这两种方式各有千秋，当需要调用的mutation比较多的时候，推荐使用mapMutation的方式，可以避免重复写很多“this.$store.commit”。若mutation调用比较少，使用mapMutation反而比较繁琐。因为它需要先import，然后在methods里再声明。

3.2 Actions

当涉及到异步操作时使用action，action中如果涉及到Vuex状态的修改，必须使用mutation来完成。
按照命名方式，使用action时的代码大概是下面的样子：

actions: {
    /**
    * 手机发送验证码
    * http://wiki.****.com/API*****
    */
    [‘PASSWORD_SEND_PHONE_CODE'](ctx, postData) {
        return Vue.http.post('/users/****', postData)
            .then(resp => Vue.checkResp(resp)) 
    },
}

以上代码定义了一个名为“PASSWORD_SEND_PHONE_CODE”的action，它发起了一个API请求，并将API返回的数据以Promise的方式返回。
几个注意点：

在这个action上用注释写了该API的wiki地址，方便之后我们可以直接访问到该API的定义，帮助定位问题。
发起请求使用了Vue.http，这是脚手架里给Vue对象配置的发起HTTP请求的方法。它基于axios。按照axios用法来使用即可。
Vue.checkResp()用来检查API调用是否正常。正常则进入下一个then方法，否则跳到catch方法中（如果存在）。它也是脚手架内配置的一个方法。只需调用即可。
“return Vue.http” 的写法本质是返回一个Promise。这么写能够使action能够被链式调用。例如：

this.$store.dispatch(‘ACTION_NAME’) 
// 接收到Vue.checkResp()返回的data 
.then(data => {}) 
// 该action出错时会跳入catch方法 
.catch(err => {})
组件中的使用
在组件中使用action也有两种方式，详见文档。

this.$store.dispatch(‘ACTION_NAME');
mapActions();

选择使用哪个原则同mutation。

4. 以上方案与目前项目中方案的异同；

如果你参与或阅读过好分数、好分数辅导相关的项目，会发现以上使用方案和项目中的略有不同。如果没有参与过，可以跳过这一节。

不同点表现在：

没有定义types这一步；
module文件命名方式里不包含“modules_”前缀；

上述方案	当前项目方案

上右图types文件集中定义了action、mutation的名字。例如：

//获取用户基本信息
export const USER_SET_PROFILE = "USER_SET_PROFILE";
export const USER_GET_PROFILE = "USER_GET_PROFILE";
export const USER_GET_USER_INFO = "USER_GET_USER_INFO";

//获取用户认证状态
export const USER_GET_AUTH_STATUS = "USER_GET_AUTH_STATUS";
export const USER_SET_AUTH_STATUS = "USER_SET_AUTH_STATUS";

之后在module文件里将这个type引入，并使用：

// 引入types
import * as types from '../types/types_user';
export default {
    mutations:  
        // 使用types
        [types.USER_SET_PROFILE](state, payload) {}
    }
}

专门定义types文件的方案需要开发人员新建一个module时也要建立相应的type文件，并在module里引入。在日后的开发中亦要先到type文件里添加type，再回到module里使用。这个操作流程将Vuex的使用流程复杂化，让开发人员为了使用Vuex在多个文件间辗转。而我们在定义action、mutation时按照命名规则把type直接写就行。例如：

// 不需要建立types文件、引入types文件；
export default {
    mutations:  
        // 在这里直接按规则命名即可
        [‘USER_SET_PROFILE'](state, payload) {}
    }
}

module文件的“modules”前缀本意是与types文件区分，如果没有了types文件，那么module文件的前缀也没有必要写了。