Vuex es un modo de gestión de estado desarrollado específicamente para aplicaciones Vue.js.
tienda: centro de datos
módulo: modelo de datos
índice: instanciación
Estructura de directorios
Vuex global
Reglas de uso
Los datos de la página (varios parámetros de consulta, matriz de resultados obtenida por api) se abstraen y se colocan en el estado.
La página de Vue se inicializa, el envío activo activa la acción para solicitar datos de API.
Una vez que Actions obtiene los datos de la API, utilice la confirmación síncrona para desencadenar mutaciones para actualizar el estado.
La página Vue utiliza propiedades calculadas para vincular los datos en el estado y actualizar la vista de forma sincrónica.
Cambios en los parámetros de la página Vue, use el compromiso síncrono para activar mutaciones para actualizar el estado. Utilice el envío para activar la acción para solicitar datos de API nuevamente.
Aprendizaje de palabras relacionadas
Vue =》 despacho =》 Acciones
Acción =》 cometer =》 Mutaciones (cambiar)
Mutaciones =》 mutar =》 Estado
Estado =》 render =》 Vue
Vue =》 cometer =》 Mutaciones (cambiar)
Aprendizaje gramatical relacionado
Cesión de desestructuración
Analice la estructura y luego asigne valores automáticamente para simplificar la escritura de código del programador;
let obj = {nombre de usuario: 'java1234', edad: 31};
/ * let username = obj.username; let age = obj.age; * /
let {nombre de usuario, edad} = obj;
console.info (nombre de usuario, edad);
Ejemplo de aplicación 1: consulta de pedido de usuario
store =》 index.js
importar Vuex desde 'vuex';
importar Vue desde 'vue';
import orderList desde './modules/orderList';
Vue.use (Vuex);
exportar nueva Vuex.Store predeterminada ({ módulos: { orderList } })
tienda => módulos => orderList.js
importar Vue desde 'vue';
estado constante = { orderList: [], params: {} }
// La página usa el estado llamando al método getters de la tienda
const getters = { getOrderList: state => state.orderList }
// acciones 异步
const actions = { fetchOrderList ({commit, state}) { Vue.http.post ('/ api / getOrderList', state.params) .then ((res) => { // acciones 中 使用 commit 调用mutaciones commit ('updateOrderList', res.data.list) }, (err) => { console.log (err) }) } }
// sincronización de mutaciones
// vuex solo permite mutaciones para modificar el estado
const mutations = { updateOrderList (estado, carga útil) { state.orderList = carga }, // los cambios de parámetros de página son acciones sincrónicas. updateParams (estado, {clave, val}) { estado.params [clave] = val } }
exportar predeterminado { estado, captadores, acciones, mutaciones }
vue => main.js
importar tienda desde './store';
new Vue ({ el: "# app", enrutador, tienda, plantilla: '<layout>', componentes: {layout} })
vue => vistas => orderList.vue
<template>
</template>
<script>
export default { data () { return { } }, computed: { // tableData list rendering data tableData () { return this. $ store.getters.getOrderList } }, métodos: { // productChange menú desplegable de productos caja de selección productChange (obj) { // Los parámetros de la página se cambian, la mutación en la tienda se activa mediante la confirmación y la mutación actualiza los parámetros en el estado de forma sincrónica. this. $ store.commit ('updateParams', { key: 'productId', val: obj.value })
//
Envío asincrónico de esto. $ Store.dispatch ('fetchOrderList')
}
}, installed
() { // Cuando se representa la página, las acciones en la tienda se activan mediante el envío y las acciones se llaman de forma asincrónica para obtener datos. esto. $ store.dispatch ('fetchOrderList') } } </script>
<style>
</style>
Ejemplo de aplicación 2: Iniciar sesión
Página de inicio de sesión
handleLogin () { this. $ refs.loginForm.validate (valid => { if (valid) { this.loading = true this. $ store.dispatch ('usuario / inicio de sesión', this.loginForm) .then (() = > { this. $ router.push ({ruta: this.redirect || '/', consulta: this.otherQuery}) this.loading = false }) .catch (() => { this.loading = false }) } else { console.log ('envío de error !!') return false } }) }
Tienda del centro de datos => módulos => user.js
importar {login, logout, getInfo} desde '@ / api / user'
const actions = { // inicio de sesión de usuario inicio de sesión ({commit}, userInfo) { const {username, password} = userInfo return new Promise ((resolver, rechazar) => { login ({username: username.trim (), contraseña: contraseña}). luego (respuesta => { const {datos} = confirmación de respuesta ('SET_TOKEN', data.token) setToken (data.token) resolve () }). catch (error => { rechazar (error) }) }) },
}
exportar predeterminado { espacio de nombres: verdadero, estado, mutaciones, acciones }
API de interfaz de inicio de sesión / usuario
importar solicitud de '@ / utils / request'
función de exportación iniciar sesión (datos) { solicitud de devolución ({ url: '/ vue-element-admin / user / login', método: 'publicar', datos }) }
para resumir:
1. Se inicializa la página de Vue. Mounted utiliza activamente el envío para desencadenar acciones en la tienda, y las acciones llaman a la API de forma asíncrona para obtener datos.
2. Utilice commit para invocar mutaciones en acciones.
3. Las mutaciones modifican el estado de forma sincrónica.
4. Vue página vea las propiedades de cálculo de enlace de datos, obtenga los datos de estado en la tienda mediante el método getters y renderice la página.
5. Los parámetros de la página Vue se cambian, la mutación en la tienda se activa mediante el compromiso y la mutación actualiza los parámetros en el estado de forma sincrónica. La página utiliza el envío para activar las acciones en la tienda nuevamente para obtener nuevos datos de Api.