Vue 全家桶介紹

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

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

推薦閱讀更多精彩內容