axios封装
我之前是这样写法,如果有params,query参数字段的话字符串拼接。但看网上的有人说不建议放在Vue原型
import axios from 'axios'
Vue.prototype.$ajax= axios // 原型
this.$ajax.get('api/getNewsList')
.then((response)=>{
this.newsList=response.data.data;
}).catch((response)=>{
console.log(response);
})
这两天看大佬写Vuex+axios,大佬就是大佬
封装axios
/*
ajax 请求函数模块
*/
import axios from 'axios'
/**
* 向外部暴漏一个函数 ajax
* @param {*} url 请求路径,默认为空
* @param {*} data 请求参数,默认为空对象
* @param {*} type 请求方法,默认为GET
*/
export default function ajax (url = '', data = {}, type = 'GET') {
// 返回值 Promise对象 (异步返回的数据是response.data,而不是response)
return new Promise(function (resolve, reject) {
// (利用axios)异步执行ajax请求
let promise // 这个内部的promise用来保存axios的返回值(promise对象)
if (type === 'GET') {
// 准备 url query 参数数据
let dataStr = '' // 数据拼接字符串,将data连接到url
Object.keys(data).forEach(key => {
dataStr += key + '=' + data[key] + '&'
})
if (dataStr !== '') {
// 把最后的&去掉,拼成完整的url
dataStr = dataStr.substring(0, dataStr.lastIndexOf('&'))
url = url + '?' + dataStr
}
// 发送 get 请求
promise = axios.get(url)
} else {
// 发送 post 请求
promise = axios.post(url, data)
}
promise.then(response => {
// 成功回调resolve()
resolve(response.data)
})
.catch(error => {
// 失败回调reject()
reject(error)
})
})
}
使用的话
const BASE_URL = '/api' // 地址全写,但考虑跨域 / proxy 跨域设置
// params参数
export const reqAddress = geohash => ajax(`${BASE_URL}/position/${geohash}`)
// query参数
export const reqSearchShop = (geohash, keyword) => ajax(BASE_URL + '/search_shops', {geohash, keyword})
Vuex模块化
index.js
/*
vuex最核心的管理对象store
组装模块并导出 store 的地方
*/
// 首先引入Vue及Vuex
import Vue from 'vue'
import Vuex from 'vuex'
// 引入四个基本模块
import state from './state'
import mutations from './mutations'
import actions from './actions'
import getters from './getters'
// 一定要声明使用插件
Vue.use(Vuex)
// 把 store 对象提供给 “store” 选项,这可以把 store 的实例注入所有的子组件
export default new Vuex.Store({
state,
mutations,
actions,
getters
})
挂载Vue实例
使用的话this.$
import store from './store'
new Vue({
el: '#app',
components: { App },
template: '<App/>',
// 为根组件加入路由
router,
store
})
state.js
export default {
categorys: [], // 食品分类数组
goods: [], // 商品列表
info: {}, // 商家信息
}
mutation-types.js
export const RECEIVE_CATEGORYS = 'receive_categorys' // 接收分类数组
export const RECEIVE_GOODS = 'receive_goods' // 接收商品数组
export const RECEIVE_INFO = 'receive_info' // 接收商家信息
mutations.js
/*
vuex 的 mutations 模块
*/
import Vue from 'vue'
import {
RECEIVE_CATEGORYS,
RECEIVE_INFO,
RECEIVE_GOODS} from './mutation-types'
// [方法名](state,{param}){}
export default {
[RECEIVE_CATEGORYS] (state, {categorys}) {
state.categorys = categorys
},
[RECEIVE_INFO] (state, {info}) {
state.info = info
},
[RECEIVE_GOODS] (state, {goods}) {
state.goods = goods
}
}
actions.js
/*
Action:通过操作mutation间接更新state的多个方法的对象
*/
// 注意要引入api接口函数
import {
reqCategorys,
reqShopGoods,
reqShopInfo,
} from '../api'
import {
RECEIVE_CATEGORYS,
RECEIVE_GOODS,
RECEIVE_INFO} from './mutation-types'
export default {
// 异步获取食品分类列表
async getCategorys ({commit}) {
// 发送异步ajax请求
const result = await reqCategorys()
// 提交一个mutation
if (result.code === 0) {
const categorys = result.data
commit(RECEIVE_CATEGORYS, {categorys})
}
},
// 异步获取商家列表
async getShops ({commit, state}) {
// 对象的结构赋值
const {longitude, latitude} = state
// 发送异步ajax请求
const result = await reqShops(longitude, latitude)
// 提交一个mutation
if (result.code === 0) {
const shops = result.data
commit(RECEIVE_SHOPS, {shops})
}
},
// 异步获取商家信息
async getShopInfo ({commit}) {
const result = await reqShopInfo()
if (result.code === 0) {
const info = result.data
commit(RECEIVE_INFO, {info})
}
},
}
getters.js
/*
包含多个基于state的getter计算属性的对象
*/
export default {
totalPrice (state) {
return state.cartFoods.reduce((preTotal, food) => preTotal + food.count * food.price, 0)
},
}
将数据放在Vuex中,在页面中调用。详情还是看官方文档。
// state
computed: {
...mapState(['info', 'categorys', 'goods']),
}
// mutations 同步
// action 异步 提交mutations
// 通过this.$store.dispatch 方法触发调用Action
this.$store.dispatch('getAddress')
// this.getAddress()
this.getUserInfo()
},
methods: {
...mapActions(['getUserInfo'])
}