QUICKAPP学习笔记-----axios,vuex

axios
安装依赖axios

npm install axios 

1. 首先，新建一个 http.js 文件：

import axios from 'axios'
import cfg from '@/automatically/config'
import Qs from 'qs'


const http = axios.create({
  // 初始配置
  baseURL: '',
})
monitor.log({ key: 'http_quickApp' })
// 添加请求拦截器
http.interceptors.request.use(
  function (config) {
    //调整api路径
    config.baseURL = cfg.server + "/"
        //修改header的值
    config.headers['clientId'] = cfg.clientId



    if (config.headers && config.headers['Content-Type'] == 'application/x-www-form-urlencoded') {
      config.transformRequest = [
        function (data) {
          return Qs.stringify(data, {
            arrayFormat: 'brackets',
          })
        },
      ]
    }

    // 在发送请求之前做些什么
    return config
  },
  function (error) {
    // 对请求错误做些什么
    return Promise.reject(error)
  }
)

// 添加响应拦截器
http.interceptors.response.use(
  function (response) {
    //处理header回传的token
    // if (response.headers._token_) {
    //   var token = JSON.parse(response.headers._token_)
    //   store.commit('setToken', token)
    // }
    //return response.data
  },
  function (error) {
    // 超出 2xx 范围的状态码都会触发该函数。
    // 对响应错误做点什么
    if (error.statusCode === 401) {
      console.log(error, 'error')
    }
    return Promise.reject(error)
  }
)

export default http

2. 使用axios，axios官网

export function getBanners (param) {
  return http.get(`/uc/path/name`, {
    params: param
  })
}

vuex

由于快应用和 vue 的实现是有差异的，不能直接使用 vuex，需要对 vuex 的源码做一些处理。这里我们直接使用大佬的 quickapp-vuex，使用方式与 vuex 基本相同

npm install quickapp-vuex -S //npm安装

vuex-quickapp 项目
vuex官网

1. 首先，新建一个 store.js 文件：

import Vuex from "quickapp-vuex";

export default new Vuex.Store({
  state: {
    count: 1,
    state:{}
  },
  getters: {
    count(state) {
      return "getter" + state.count;
    }
  },
  mutations: {
    increment(state) {
      state.count++;
    },
    decrement(state) {
      state.count--;
    },
    setToken (state, val) {
		 Object.assign(state.token, val)
  }
});

2. 在 app.ux 中引入 store.js，并挂到全局对象上

import store from "path to store.js";
import Vuex from "quickapp-vuex";

Vuex.install(store);

3. 之后我们就能在组件和页面中使用 vuex 了。注意，与在 vue 中使用 vuex 不同，在快应用中使用 vuex需要包一层Vuex.Component，其他的和 vuex 用法类似

<template>
  <div class="demo-page">
    <text class="title">欢迎打开{{count}}</text>
    <text class="btn" onclick="increment">+</text>
    <text class="btn" onclick="decrement">-</text>
  </div>
</template>

<script>
import {mapGetters, mapMutations, Component} from 'quickapp-vuex'

export default Component({
  onInit() {
    let tokenInfo=''
    storage.get({
	    key: 'tokenName',
	    success: function(data) {
	      tokenInfo=data
	      console.log('handling success',data)
	    },
	    fail: function(data, code) {
	      console.log(`handling fail, code = ${code}`)
	    }
	  })
     store.commit('setToken', tokenInfo)
  },
  computed:{
    ...mapGetters(['count'])
  },

  ...mapMutations(['increment', 'decrement'])
})
</script>