Introduction to Vue Family Bucket
网上找的一个比较全的系统介绍vue全家桶的地址: **http://doc.liangxinghua.com/vue-family/1.html**
The following is a summary.
Vue has a famous family bucket series, including vue-router (http://router.vuejs.org), vuex (http://vuex.vuejs.org), vue-resource (https: //github.com/pagekit/vue-resource). Coupled with the build tool vue-cli, sass style, is the core component of a complete vue project.
In summary: 1. Project construction tool, 2. Routing, 3. State management, 4. http request tool.
Introduced separately below
Preface : Two core ideas of Vue: componentization and data-driven. Componentization: Split the whole into reusable individuals, data-driven: directly affect the bom display through data changes, avoiding dom operations.
1. Vue-cli is a scaffold to quickly build this single-page application,
install vue-cli globally
$ npm install --global vue-cli
Create a new project based on the webpack template
$ vue init webpack my-project
Install dependencies, go you
$ cd my-project
$ npm install
$ npm run dev
Two, vue-router
Installation: npm installvue-router
If you use it in a modular project, you must explicitly install the routing function through Vue.use():
import
Vue
from'vue'
import
VueRouter
from'vue-router'
Vue.use(VueRouter)
Also note that in use, you can use the transition properties of vue to render the effect of switching pages.
Three, vuex
The state management developed by vuex for vue.js applications can be understood as global data management. Vuex is mainly composed of five parts: state action, mutation, getters, and mudle.
The usage process is: The above four parts can be directly called in the component except mudle,
1、state
The data similar to the vue object is used to store data and state. The stored data is responsive. If the data changes, the data-dependent components will also change accordingly.
Examples of two ways to get state:
1.store.getters['getRateUserInfo']
2. ...mapGetters({
UserInfo: 'login/UserInfo', // 用户信息
menuList: 'getMenuList', // approve 运价审批
RateUserInfo: 'getRateUserInfo' // Rate用户信息
})
Note:
MapState can be used to map global state and getters to the computed properties of the current component.
2. actions
Action is triggered by the store.dispatch method: action supports asynchronous calls (api can be called), mutation only supports synchronization of operations, and action submits mutation instead of directly changing the state.
E.g:
const store = new Vuex.Store({
state: {
count: 0
},
mutations: {
increment (state) {
state.count++
}
},
actions: {
increment (context) {
context.commit('increment')
}
}
})
The Action function accepts a context object with the same methods and properties as the store instance, so you can call context.commit to submit a mutation, or get state and getters through context.state and context.getters.
In practice, we often use ES2015 parameter deconstruction to simplify the code (especially when we need to call commit many times):
actions
:{
increment
({
commit
}){
commit('increment')
}
}
3、mutation
Each mutation has a string event type (type) and a callback function (handler). This callback function is where we actually make state changes, and it will accept state as the first parameter.
4、getters
Vuex allows us to define "getter" in the store (it can be considered as a calculated attribute of the store). Just like a calculated property, the return value of a getter will be cached according to its dependencies, and will be recalculated only when its dependent value has changed
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 helper function
The mapGetters helper function just maps the getters in the store to the local calculated properties:
Four, axios
axios is an http request package, vue official website recommends using axios for http calls.
installation:
npm install axios --save
example:
1. Send a GET request
//
通过给定的
ID
来发送请求
axios.get('/user?ID=12345')
.then(function(response){
console.log(response);
})
.catch(function(err){
console.log(err);
});
The above request can also be sent in this way
axios.get('/user',{
params:{
ID:12345
}
})
.then(function(response){
console.log(response);
})
.catch(function(err){
console.log(err);
});
Send a POST request
axios.post('/user',{
firstName:'Fred',
lastName:'Flintstone'
})
.then(function(res){
console.log(res);
})
.catch(function(err){
console.log(err);
});