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操做。

1、Vue-cli是快速構建這個單頁應用的腳手架,

# 全局安裝 vue-cli
$ npm install --global vue-cli
# 建立一個基於 webpack 模板的新項目
$ vue init webpack my-project
# 安裝依賴，走你
$ cd my-project
$ npm install
$ npm run dev

2、vue-router

安裝：npm installvue-router

若是在一個模塊化工程中使用它，必需要經過 Vue.use() 明確地安裝路由功能：

importfrom'vue'Vue 

importfrom'vue-router'VueRouter 

Vue.use(VueRouter)

另外注意在使用中，能夠利用vue的過渡屬性來渲染出切換頁面的效果。

3、vuex

vuex爲專門爲vue.js應用程序開發的狀態管理能夠理解爲全局的數據管理。vuex主要由五部分組成：state  action、mutation、getters、mudle組成。

使用流程是： 組件中能夠直接調用上面四個部分除了mudle，

一、state

相似vue 對象的data, 用來存放數據以及狀態。存放的數據爲響應式，若是數據改變，那麼依賴數據的組件也會發生相應的改變。

獲取state的兩種方式例子：

1.store.getters['getRateUserInfo']

2. ...mapGetters({

        UserInfo: 'login/UserInfo', // 用戶信息

        menuList: 'getMenuList', // approve 運價審批

        RateUserInfo: 'getRateUserInfo' // Rate用戶信息

   })

注意：state能夠經過mapState把全局的和getters 映射到當前組件的computed計算屬性中。

二、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')   

} 

}

 

三、mutation

每一個 mutation 都有一個字符串的 事件類型(type) 和一個 回調函數(handler)。這個回調函數就是咱們實際進行狀態更改的地方，而且它會接受 state 做爲第一個參數。

四、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 映射到局部計算屬性：

 

4、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);

原文做者：hony、芒果原文連接：https://www.cnblogs.com/yangslin/p/8980799.html});