Vuex+axios(成长篇幅)

1.vue+element封装axios请求分步走

1.1用axios创建一个service服务，封装axios请求

1.11用axios创建一个service服务

 // create an axios instance
const service = axios.create({
  baseURL: process.env.VUE_APP_BASE_API, // url = base url + request url
  // withCredentials: true, // send cookies when cross-domain requests
  timeout: 5000 // request timeout
})

1.12.请求拦截器

// request interceptor
service.interceptors.request.use(
  config => {
    // do something before request is sent

    if (store.getters.token) {
      // let each request carry token
      // ['X-Token'] is a custom headers key
      // please modify it according to the actual situation
      config.headers['X-Token'] = getToken()
    }
    return config
  },
  error => {
    // do something with request error
    console.log(error) // for debug
    return Promise.reject(error)
  }
)

1.13.响应拦截器

// response interceptor
service.interceptors.response.use(
  /**
   * If you want to get http information such as headers or status
   * Please return  response => response
  */

  /**
   * Determine the request status by custom code
   * Here is just an example
   * You can also judge the status by HTTP Status Code
   */
  response => {
    const res = response.data

    // if the custom code is not 20000, it is judged as an error.
    if (res.code !== 20000) {
      Message({
        message: res.message || 'Error',
        type: 'error',
        duration: 5 * 1000
      })

      // 50008: Illegal token; 50012: Other clients logged in; 50014: Token expired;
      if (res.code === 50008 || res.code === 50012 || res.code === 50014) {
        // to re-login
        MessageBox.confirm('You have been logged out, you can cancel to stay on this page, or log in again', 'Confirm logout', {
          confirmButtonText: 'Re-Login',
          cancelButtonText: 'Cancel',
          type: 'warning'
        }).then(() => {
          store.dispatch('user/resetToken').then(() => {
            location.reload()
          })
        })
      }
      return Promise.reject(new Error(res.message || 'Error'))
    } else {
      return res
    }
  },
  error => {
    console.log('err' + error) // for debug
    Message({
      message: error.message,
      type: 'error',
      duration: 5 * 1000
    })
    return Promise.reject(error)
  }
)

export default service

1.2.使用封装的axios请求

import request from '@/utils/request' //引入刚刚封装的axios文件
export function getInfo(token) {
  return request({
    url: '/vue-element-admin/user/info',
    method: 'get',
    params: { token }
  })
}

1.最后在页面中引入接口名即可使用，

getInfo(Token).then(res=>{处理res即可})

2.vuex dispatch/commit传递多个参数的方式

2.1载荷 Payload

   this.$store.dispatch('user/Login', {
            username:this.loginForm.username,
            password:this.loginForm.password
      }) .then(() => {})

2.2对象Object

   this.$store.dispatch({
        type:'user/Login',
        username:this.loginForm.username,
        password:this.loginForm.password
  }).then(()=>{})

3.Vuex学习（参考连接）

1.是专门为vue.js开发用的状态管理模式

2.获取数值的三种方式

2.1 this.$store.state.xxx

export default ({
    mounted(){
        console.log(this.$store.state.name)
    },
})

2.2this.$store.state.XXX放在计算属性里面计算

export default ({
    mounted(){
        console.log(this.getName)
    },
    computed:{
        getName(){
            return this.$tore.state.name
        },
    }
})

2.3简化this.$store.state.XXX为解构方式

export default ({
    mounted(){
        console.log(this.name)
    },
    computed:{
        //解构加载值到计算属性中
        ...mapState(['name']),
        //解构的时候赋值别名
        ...mapState({name1 :'name'}),
        //getter 
        ...mapGetters(['getNameFace']),
        ...mapGetters({getName1:['getNameFace']}),
    }
})

2.4getter修饰符

export default ({
    mounted(){
        console.log(this.getNameFace)
    },
    computed:{
        //getter 
        ...mapGetters(['getNameFace']),
        ...mapGetters({getName1:['getNameFace']}),
    }
})

store.js文件

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)

const store = new Vuex.Store({
    state: {
        name: '张三',
        number: 0,
        list: [{
            id: 1, name: '111'
        },
        {
            id: 2, name: '222'
        },
        ]
    },
    getters:{
        getNameFace(state){
            return `hello${state.name}`
        }
    }
})
export default store;

3.修改数值的方式

3.1Mutation（同步操作）

store.js

 const store = new Vuex.Store({
    state: {
        name: '张三',
        number: 0,
        list: [{
            id: 1, name: '111'
        },
        {
            id: 2, name: '222'
        },
        ]
    },
    getters:{
        getNameFace(state){
            return `hello${state.name}`
        }
    },
    mutations:{
        setNumberIsWhat(state, payload) { // 增加一个带参数的mutations方法
            state.number = payload.number;
        },
    }
})

app.vue

export default ({
    mounted(){
        console.log(this.$store.number); //0
        this.$store.commit('setNumberIsWhat',{number:666});
        console.log(this.$store.number) // 666
        // 解构的方式
         this.setNumberIsWhat({ number: 999 });
    },
     methods: {   // 注意，mapMutations是解构到methods里面的，而不是计算属性了
        ...mapMutations(['setNumberIsWhat']),
        ...mapMutations({ setNumberIsAlias: 'setNumberIsWhat' }),  //起别名
    },
    })

3.2 Action (异步操作)

store.js文件添加

actions:{
    setNum(content,payload){
        return new Promise(resolve=>{        
            setTimeout(()=>{                       //模拟一个异步操作，1秒后修改number为888
                content.commit('setNumberIsWhat',{number:payload.number})
                resolve();
            },1000)
        })
    }
}

app.vue文件下

export default ({
    mounted(){
    },
    method:{
        ...mapActions({setNum1:'setNum'}),
        ...mapActions(['setNum'])
    },
    async mounted(){
        console.log(`旧值:${this.$store.state.number}`);
        await this.$store.dispatch('setNum',{number:999});
        console.log(`新值:${this.$store.state.number}`) //1秒后打印出来
        await this.setNum({number:999})
    }
})

4.ref、this.$ref 参考连接

4.1 <p ref="p">Hello</p> this.$refs.p在普通html上获取对应的DOM元素，在组件上可以调用对应的实例方法

4.2@click.native 在组件上调用方法需要加上native不然不生效