Vue有著名的全家桶系列,包含了vue-router(http://router.vuejs.org),vuex(http://vuex.vuejs.org), vue-resource(https://github.com/pagekit/vue-resource)。再加上構建工具vue-cli,sass樣式,就是一個完整的vue項目的核心構成。
概括起來就是:、1.項目構建工具、2.路由、3.狀態管理、4.http請求工具。
下面單獨介紹
前言:Vue兩大核心思想:組件化和數據驅動。組件化:把整體拆分為各個可以復用的個體,數據驅動:通過數據變化直接影響bom展示,避免dom操作。
一、Vue-cli是快速構建這個單頁應用的腳手架,
#?全局安裝?vue-cli
$ npm install --global vue-cli
#?創建一個基于?webpack?模板的新項目
$ vue init webpack my-project
#?安裝依賴,走你
$?
cd?my-project
$ npm install
$ npm run dev
二、vue-router
安裝:npm installvue-router
如果在一個模塊化工程中使用它,必須要通過?Vue.use()?明確地安裝路由功能:
import Vue from'vue'
import VueRouter from'vue-router'
Vue.use(VueRouter)
另外注意在使用中,可以利用vue的過渡屬性來渲染出切換頁面的效果。
三、vuex
vuex為專門為vue.js應用程序開發的狀態管理可以理解為全局的數據管理。vuex主要由五部分組成:state ?action、mutation、getters、module組成。
使用流程是: 組件中可以直接調用上面四個部分除了module,
1、state
類似vue?對象的data,?用來存放數據以及狀態。存放的數據為響應式,如果數據改變,那么依賴數據的組件也會發生相應的改變。
獲取state的兩種方式例子:
1.store.getters['getRateUserInfo']
2. ...mapGetters({
??????? UserInfo: 'login/UserInfo', // 用戶信息
??????? menuList: 'getMenuList', // approve 運價審批
??????? RateUserInfo: 'getRateUserInfo' // Rate用戶信息
?? })
注意:可以通過mapState把全局的state和 getters 映射到當前組件的 computed計算屬性中。
2、actions
Action?通過?store.dispatch?方法觸發:action支持異步調用(可以調用api),mutation只支持操作同步,并且action提交的是?mutation,而不是直接變更狀態。
例如:
const store = new Vuex.Store({
? state: {
??? count: 0
? },
? mutations: {
??? increment (state) {
????? state.count++
??? }
? },
? actions: {
??? increment (context) {
????? context.commit('increment')
??? }
? }
})
Action?函數接受一個與?store?實例具有相同方法和屬性的?context?對象,因此你可以調用?context.commit?提交一個?mutation,或者通過?context.state?和?context.getters?來獲取?state?和?getters。
實踐中,我們會經常用到?ES2015?的?參數解構?來簡化代碼(特別是我們需要調用?commit?很多次的時候):
actions:{
? increment ({ commit }){
??? commit('increment')
? }
}
3、mutation
每個?mutation?都有一個字符串的事件類型(type)和一個回調函數(handler)。這個回調函數就是我們實際進行狀態更改的地方,并且它會接受?state?作為第一個參數。
4、getters
Vuex?允許我們在?store?中定義“getter”(可以認為是?store?的計算屬性)。就像計算屬性一樣,getter?的返回值會根據它的依賴被緩存起來,且只有當它的依賴值發生了改變才會被重新計算
const getters = {
? getRateInitData: state => state.rateInitData,
? getchooseRateObj: state => state.chooseRateObj,
? getSearchRateParams: state => state.searchRateParams,
? getSearchRateResult: state => state.searchRateResult,
? getRateUserInfo: state => state.RateUserInfo,
? getMenuList: state => state.menuList,
? getRateQueryParams: state => state.rateQueryParams,
? getRateQueryResult: state => state.rateQueryResult,
? getCheckRateDetailParams: state => state.checkRateDetailParams,
? getReferenceCondition: state => state.referenceCondition,
? getWaitApprovalParams: state => state.waitApprovalParams
}
mapGetters?輔助函數
mapGetters?輔助函數僅僅是將?store?中的?getter?映射到局部計算屬性:
四、axios
axios是一個http請求包,vue官網推薦使用axios進行http調用。
安裝:
npm install axios --save
例子:
1.發送一個GET請求
//通過給定的ID來發送請求
axios.get('/user?ID=12345')
? .then(function(response){
??? console.log(response);
? })
? .catch(function(err){
??? console.log(err);
? });
//以上請求也可以通過這種方式來發送
axios.get('/user',{
? params:{
??? ID:12345
? }
})
.then(function(response){
? console.log(response);
})
.catch(function(err){
? console.log(err);
});
2、發送一個POST請求
axios.post('/user',{
? firstName:'Fred',
? lastName:'Flintstone'
})
.then(function(res){
? console.log(res);
})
.catch(function(err){
? console.log(err);
});
具體參考:http://www.lxweimin.com/p/df464b26ae58