vue全家桶有哪些

推薦教學：VUE.JS教學

　　Vue有著名的全家桶系列，包含了vue-router，vuex#， 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、mudle組成。

　　使用流程是： 元件中可以直接呼叫上面四個部分除了mudle，

1、state

　　類似vue 物件的data, 用來存放資料以及狀態。存放的資料為響應式，如果資料改變，那麼依賴資料的元件也會發生對應的改變。

取得state的兩種方式範例：

1.store.getters['getRateUserInfo']2. ...mapGetters({

UserInfo: 'login/UserInfo', // 使用者資訊

##        menuList: 'getMenuList', // approve 運價審核

      ##   })

注意：可以透過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. getters 來取得 state 和 getters。

實務中，我們會常用到 ES2015 的 參數解構 來簡化程式碼（特別是需要呼叫 commit 很多次的時候）：

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);
});

以上是vue全家桶有哪些的詳細內容。更多資訊請關注PHP中文網其他相關文章！