一、场景说明

我们在开发的过程中，都要求能够把通用方法进行抽象封装，供全局使用
这样，代码更优雅简练。

Vue中就可以用Vuex实现全局方法的开发。
这一篇，实现模块化Vuex的编程方式

二、代码实现

1、通用方法封装

比如，这里实现一个user相关操作的js脚本文件
像这种供Vuex使用的脚本文件，我们要固定的结构。
可以类似理解为javaBean对象。

它有4个不可缺少的部分。

state：字段区

mutations：修改字段的方法区，类似javaBean中的set方法

getters：获取字段值的方法，类似javaBean中的get方法
其中，这个地方，可以抽象到一个公共文件中，但不推荐，影响阅读效果。
配置了这个，那么，action方法中的影藏参数state就有值了。

在其他vue组件中，想要获取值的写法是：this.$store.state.user.token

actions：回调方法区，供外部函数，通过store.dispatch调用

user.js

import { login } from '@/api/login'
const user = {state:{      //字段token:''},mutations:{   //修改字段的方法SET_TOKEN: (state, token) => {state.token = token}},getters:{     //获取字段值的方法token: state => state.user.token},actions:{   //回调方法Login({commit, state},userInfo){const username = userInfo.username.trim()const password = userInfo.passwordconst code = userInfo.codeconst uuid = userInfo.uuid//异步返回处理结果，外面调用者可以通过then接收结果。return new Promise((resolve, reject) => {login(username, password, code, uuid).then(res => {res=res.data;commit('SET_TOKEN', res.token)//成功，则调用resolve，可以把res返回出去resolve(res)}).catch(error => {//失败返回错误信息reject(error)});});}}
}export default user

2、store配置

src/store/index.js

import Vue from 'vue'
import Vuex from 'vuex'
import user from '@/store/modules/user'Vue.use(Vuex)export default new Vuex.Store({modules: {user}
})

3、使用Vuex

          //使用vuex调用接口，可以将通用方法整理到一处。//此处想用用then做后续处理，那么，action里面的方法需要return Promisethis.$store.dispatch('Login',this.loginForm).then((res) => {console.log('222',res);console.log()});