Introducción a Vue Family Bucket
网上找的一个比较全的系统介绍vue全家桶的地址: **http://doc.liangxinghua.com/vue-family/1.html**
El siguiente es un resumen.
Vue tiene una famosa serie de cubos familiares, que incluye vue-router (http://router.vuejs.org), vuex (http://vuex.vuejs.org), vue-resource (https: / /github.com/pagekit/vue-resource). Junto con la herramienta de compilación vue-cli, sass style, es el componente central de un proyecto vue completo.
En resumen: 1. Herramienta de construcción de proyectos, 2. Enrutamiento, 3. Gestión de estados, 4. Herramienta de solicitud http.
Introducido por separado a continuación
Prefacio : Dos ideas centrales de Vue: componentización y basada en datos. Componentización: Divida el conjunto en individuos reutilizables, basados en datos: afecte directamente la pantalla de bombeo a través de cambios de datos, evitando operaciones dom.
1. Vue-cli es un andamio para crear rápidamente esta aplicación de una sola página,
instalar vue-cli globalmente
$ npm install --global vue-cli
Crea un nuevo proyecto basado en la plantilla de paquete web
$ vue init webpack my-project
Instala dependencias, vete
$ cd my-project
$ npm install
$ npm run dev
Dos, vue-router
Instalación: npm installvue-router
Si lo usa en un proyecto modular, debe instalar explícitamente la función de enrutamiento a través de Vue.use ():
import
Vue
from'vue'
import
VueRouter
from'vue-router'
Vue.use(VueRouter)
También tenga en cuenta que en uso, puede usar las propiedades de transición de vue para representar el efecto de cambiar de página.
Tres, vuex
La gestión de estado desarrollada por vuex para aplicaciones vue.js puede entenderse como gestión de datos global. Vuex se compone principalmente de cinco partes: acción de estado, mutación, getters y mudle.
El proceso de uso es: Las cuatro partes anteriores se pueden llamar directamente en el componente, excepto mudle,
1 、 estado
Los datos similares al objeto vue se utilizan para almacenar datos y estado. Los datos almacenados responden. Si los datos cambian, los componentes dependientes de los datos también cambiarán en consecuencia.
Ejemplos de dos formas de obtener el estado:
1.store.getters['getRateUserInfo']
2. ...mapGetters({
UserInfo: 'login/UserInfo', // 用户信息
menuList: 'getMenuList', // approve 运价审批
RateUserInfo: 'getRateUserInfo' // Rate用户信息
})
Nota:
El estado global y los captadores se pueden asignar a las propiedades calculadas del componente actual a través de mapState.
2. acciones
La acción se activa mediante el método store.dispatch: la acción admite llamadas asincrónicas (se puede llamar a api), la mutación solo admite la sincronización de operaciones y la acción envía la mutación en lugar de cambiar directamente el estado.
P.ej:
const store = new Vuex.Store({
state: {
count: 0
},
mutations: {
increment (state) {
state.count++
}
},
actions: {
increment (context) {
context.commit('increment')
}
}
})
La función Action acepta un objeto de contexto con los mismos métodos y propiedades que la instancia de la tienda, por lo que puede llamar a context.commit para enviar una mutación u obtener state y getters a través de context.state y context.getters.
En la práctica, a menudo usamos la desestructuración de parámetros de ES2015 para simplificar el código (especialmente cuando necesitamos llamar a commit muchas veces):
actions
:{
increment
({
commit
}){
commit('increment')
}
}
3 、 mutación
Cada mutación tiene un tipo de evento de cadena (tipo) y una función de devolución de llamada (controlador). Esta función de devolución de llamada es donde realmente hacemos cambios de estado, y aceptará el estado como el primer parámetro.
4 、 captadores
Vuex nos permite definir "getter" en la tienda (se puede pensar en un atributo calculado de la tienda). Al igual que una propiedad calculada, el valor de retorno de un captador se almacenará en caché de acuerdo con sus dependencias y se volverá a calcular solo cuando su valor dependiente haya cambiado
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
}
función auxiliar mapGetters
La función auxiliar mapGetters simplemente asigna los captadores en la tienda a las propiedades calculadas locales:
Cuatro, axios
axios es un paquete de solicitud http, el sitio web oficial de vue recomienda usar axios para llamadas http.
instalación:
npm install axios --save
ejemplo:
1. Envíe una solicitud GET
//
通过给定的
ID
来发送请求
axios.get('/user?ID=12345')
.then(function(response){
console.log(response);
})
.catch(function(err){
console.log(err);
});
La solicitud anterior también se puede enviar de esta manera
axios.get('/user',{
params:{
ID:12345
}
})
.then(function(response){
console.log(response);
})
.catch(function(err){
console.log(err);
});
Envíe una solicitud POST
axios.post('/user',{
firstName:'Fred',
lastName:'Flintstone'
})
.then(function(res){
console.log(res);
})
.catch(function(err){
console.log(err);
});