2019-06-30(前端第二月第三節)

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)與一個組件(包含有共享數據)對應

?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • VUE: vue 項目中常用的 2 個 ajax 庫:vue-resource 、axios vue-re...
    三腿M閱讀 57評論 0 0
  • vue 項目中常用的 2 個 ajax 庫:vue-resource, axios 1. vue-resource...
    嚜羽閱讀 112評論 0 0
  • 一、技術準備 二、開發工具 三、使用 vue-cli 快速開始模板項目 四、給項目添加組件 五、使用vue-rou...
    35eeabfa0772閱讀 31,567評論 4 60
  • 響應式布局的理解 響應式開發目的是一套代碼可以在多種終端運行,適應不同屏幕的大小,其原理是運用媒體查詢,在不同屏幕...
    懶貓_6500閱讀 800評論 0 0
  • vue 項目中常用的 2 個 ajax 庫:vue-resource, axios 1. vue-resource...
    張明越閱讀 208評論 0 0