vux+axios 入坑指南

vue项目中vux和axios是我们必不可少的两大组件，那么如何更优雅组合使用它们便成为了一个严肃的问题，
vux的官方文档简洁得令人出奇，这也是最让人恼火的地方，为此我研究了很多大神的Demo，提取了和改进了其
中我自认是精华的东西，说实话这部分的教程确实少得可怜，而且很多都是滥竽充数，希望我篇帖子能帮助到更多
的人，少踩一些不必要的坑，技术因分享而变得更有价值

1. 安装axios

   npm install axios -s
   

2. 新建Http.js

   class Http {
     constructor(){
       this.Domain = 'https://www.api.com';
     }
     require(options) {
       if (!options.api) throw new Error('api 不能为空');
       if (!options.param) { options.param = {} }; 
       if (!options.methods) { options.methods = 'POST' }; //不传递方法默认为POST
   
       return new Promise((resolve,reject) => {
           return axios({
               method: options.methods,
               url: options.api,
               baseURL: this.Domain,
               headers: {
                   'token': options.param.MemberToken
               },
               data: options.param
           }).then(response => {
               if(response.data.Code === 100000){ //请求成功
                   return resolve(response.data)
               }else{
                   console.log(response.data.Msg)
                   return reject(response.data)
               }
           },error => {
               Indicator.close();
               console.log(error)
               return reject()
           })
       })
     }
   }
   export default Http;
   

3. 新建API.js

   import Http from '@/utils/Http';
   
   // 登录
   export const login = (params) => new Http().require({api:'/user/login',param:params});
   

4. 安装vux

   npm install vuex -s
   

5. 创建store文件夹

   • 在文件夹下创建index.js

     import Vue from 'vue'
     import Vuex from 'vuex'
     import getters from './getters'
     // 导入模块模型文件
     import user from './modules/user'
     
     Vue.use(Vuex)
     
     const store = new Vuex.Store({
       modules: {
         user
       },
       getters
     })
     
     export default store
     

   • 在文件夹下创建getter.js

   • 在文件夹下创建一个modules文件夹

   • 在modules文件夹创建各个模块的模型，这里我们创建一个user.js

     // 导入API.js的 login
     import { login } from '@/service/API';
     
     // 创建user数据模型
     const user = {
       state: {
         userInfo: null //用户信息数据
       },
       mutations: {
       // 保存用户信息
         SET_USERINFO_DATA(state, userInfo) {
           state.userInfo = userInfo
         }
       },
       actions: {
       //登录
         login({commit,state}, parameterData) {
           return new Promise((resolve, reject) => {
            //调用API.js的 login方法
             login(parameterData).then(response => {
              // 保存到状态机中去
               commit('SET_USERINFO_DATA',parameterData)
               resolve(response)
             }, err => {
               reject(err)
             })
           })
         }
       }
     }
     export default user
     
     

6. 配置 vuex,在main.js中进行配置

   import Vue from 'vue'
   import App from './App'
   import store from '@/store'
   
   Vue.config.productionTip = false
   
   new Vue({
     el: '#app',
     store,
     components: { App },
     template: ''
   })
   

7. 使用使用起来就很简单了，在任意需要的页面引入

好了装逼到此结束，如有不清楚的可以进QQ群大家一起探讨 384089763