2019-07-02

vue 项目中常用的 2 个 ajax 库 ：vue-resource， axios

1. vue-resource

下载：cnpm install vue-resource --save

编码：

// 引入模块

import VueResource from 'vue-resource'

// 使用插件

Vue.use(VueResource)

// 通过 vue/组件对象发送 ajax 请求

this.$http.get('/someUrl').then((response) => {

// success callback

console.log(response.data) //返回结果数据

}, (response) => {

// error callback

console.log(response.statusText) //错误信息

})

2. axios 的使用

下载：cnpm install axios --save

编码：

// 引入模块

import axios from 'axios'

// 发送 ajax 请求

axios.get(url)

.then(response => {

console.log(response.data) // 得到返回结果数据

})

.catch(error => {

console.log(error.message)

})

测试接口：

接口 1:

https://api.github.com/search/repositories?q=v&sort=stars

接口 2:

https://api.github.com/search/users?q=aa

vuex （ 对 vue 应用中多个组件的共享状态进行集中式的管理(读/写) ）

下载：cnpm install --save vuex

vuex 核心概念和 API

1.state

1）vuex 管理的状态对象

2）它应该是唯一的

2.mutations

1）包含多个直接更新 state 的方法(回调函数)的对象

2）谁来触发: action 中的 commit('mutation 名称')

3）只能包含同步的代码, 不能写异步代码

3.actions

1）包含多个事件回调函数的对象

2）通过执行: commit()来触发 mutation 的调用, 间接更新 state

3）谁来触发: 组件中: $store.dispatch('action 名称', data1) // 'zzz'

4）可以包含异步代码(定时器, ajax)

4.getters

1）包含多个计算属性(get)的对象

2）谁来读取: 组件中: $store.getters.xxx

5.modules

1）包含多个 module

2）一个 module 是一个 store 的配置对象

3）与一个组件(包含有共享数据)对应