VUE:
vue 项目中常用的 2 个 ajax 库:vue-resource 、axios
vue-resource:vue 插件, 非官方库, vue1.x 使用广泛
axios:通用的 ajax 请求库, 官方推荐, vue2.x 使用广泛
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)与一个组件(包含有共享数据)对应