Primero, conozca VueX
1.1 Acerca deVueX
VueXEs Vueuna herramienta de gestión estatal adecuada para su uso en el desarrollo de proyectos. Imagine que si utiliza con frecuencia la transferencia de parámetros de componentes para sincronizar datavalores en el desarrollo de un proyecto , una vez que el proyecto sea muy grande, administrar y mantener estos valores será un trabajo bastante complicado. Con este fin, Vuese proporciona una herramienta de gestión unificada para estos valores que utilizan con frecuencia varios componentes VueX. En proyectos VueXexistentes Vue, solo necesitamos definir estos valores en VueX, y luego se pueden usar en Vuelos componentes de todo el proyecto.
1.2 Instalación
Dado que VueXse realiza VueClidespués de aprender , consulte el VueCli 2.xdirectorio creado para ver la lista de elementos que aparecen a continuación .
La premisa de los siguientes pasos es que haya completado la construcción del proyecto Vue y se haya movido al directorio de archivos del proyecto.
- Npm instalar Vuex
npm i vuex -s
- Agregue una nueva
storecarpeta en el directorio raíz del proyecto y créela en la carpetaindex.js
En este punto, la srccarpeta de su proyecto debería verse así
│ App.vue
│ main.js
│
├─assets
│ logo.png
│
├─components
│ HelloWorld.vue
│
├─router
│ index.js
│
└─store
index.js
1.3 Uso
1.3.1 Contenidos storeen inicializaciónindex.js
import Vue from 'vue'
import Vuex from 'vuex'
//挂载Vuex
Vue.use(Vuex)
//创建VueX对象
const store = new Vuex.Store({
state:{
//存放的键值对就是所要管理的状态
name:'helloVueX'
}
})
export default store
1.3.2 storeMontar en la Vueinstancia del proyecto actual
Abra main.js
import Vue from 'vue'
import App from './App'
import router from './router'
import store from './store'
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
store, //store:store 和router一样，将我们创建的Vuex实例挂载到这个vue实例中
render: h => h(App)
})
1.3.3 Use Vuex en componentes
Por ejemplo, en App.vue, necesitamos usar el nombre definido en el estado para mostrar en la etiqueta h1
<template>
<div id='app'>
name:
<h1>{
{
$store.state.name }}</h1>
</div>
</template>
O para usar en el método de componentes
...,
methods:{
add(){
console.log(this.$store.state.name)
}
},
...
Tenga en cuenta que no cambie stateel valor del estado aquí , se explicará más adelante.
1.4 Instalar VueDevtools
En el desarrollo de un proyecto de Vue, es necesario monitorear varios valores en el proyecto.Para mejorar la eficiencia, Vue proporciona una extensión de navegador: VueDevtools.
Al aprender VueX, es más necesario utilizar este complemento. Con respecto al uso de este complemento, puede pasar al sitio web oficial, por lo que no lo repetiré aquí.
En segundo lugar, el contenido principal de VueX
En el objeto VueX state, no solo hay miembros , sino también stateel conjunto de métodos utilizado para manipular los datos y el conjunto de métodos que debe stateprocesarse cuando necesitamos alinear los datos.
Lista de miembros:
- estado estado de almacenamiento
- Operaciones de estado miembro de mutaciones
- los captadores procesan a los miembros del estado al mundo exterior
- acciones operaciones asincrónicas
- módulos Gestión de estado modular
2.1 flujo de trabajo de VueX
En primer lugar, Vuesi un componente VueXnecesita realizar una solicitud al backend durante el proceso de llamar a un determinado método, o cuando se produce una operación asincrónica, dispatchse requiere actionsel método en VueX para garantizar la sincronización de los datos. Se puede decir que actionla existencia es permitir mutationsque funcione el método en la operación asincrónica.
Si no hay una operación asincrónica, entonces podemos enviar directamente el método escrito por nosotros mismos en las Mutaciones en el estado del componente para lograr statela operación en el miembro. Tenga en cuenta que 1.3.3se menciona en la sección que no se recomienda manipular directamente statelos miembros en el componente, porque la modificación directa (por ejemplo this.$store.state.name = 'hello':) no se puede VueDevtoolsmonitorear.
El último miembro de estado modificado se representará en la posición original del componente.
2.2 Mutaciones
Las mutaciones son una colección de métodos para manipular datos de estado, como modificar, agregar y eliminar datos.
2.2.1 Cómo utilizar mutaciones
mutationsLos métodos tienen parámetros predeterminados:
([state] [,payload])
stateEstá en elVueXobjeto actualstatepayloadEste método se utiliza para pasar parámetros cuando se llama
Por ejemplo, si escribimos un método, cuando se ejecuta, el valor del nombre en el siguiente ejemplo se puede cambiar a "jack", solo necesitamos hacer esto
index.js
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const store = new Vuex({
state:{
name:'helloVueX'
},
mutations:{
//es6语法，等同edit:funcion(){...}
edit(state){
state.name = 'jack'
}
}
})
export default store
En el componente, debemos llamar a esto así mutation, por ejemplo, en uno de App.vue method:
this.$store.commit('edit')
2.2.2 Valor de paso de la mutación
En el proceso de producción real, encontrará la necesidad mutationde llevar algunos parámetros al método al enviar un determinado .
Cuando se envía un solo valor
this.$store.commit('edit',15)
Cuando necesite enviar varios parámetros, se recomienda ponerlos en un objeto para enviar:
this.$store.commit('edit',{
age:15,sex:'男'})
Recibir parámetros montados:
edit(state,payload){
state.name = 'jack'
console.log(payload) // 15或{age:15,sex:'男'}
}
Otra forma de enviar
this.$store.commit({
type:'edit',
payload:{
age:15,
sex:'男'
}
})
2.2.3 Agregar y eliminar miembros en el estado
Para cooperar con los datos de respuesta de Vue, debemos utilizar los métodos proporcionados por Vue para operar en el método de mutaciones. Si deleteo xx.xx = xxformulario para agregar o eliminar, los datos Vue no pueden responder en tiempo real.
-
Vue.set establece el valor de un miembro para un objeto, si no existe, agréguelo
Por ejemplo, agregue un miembro de edad al objeto de estado
Vue.set(state,"age",15) -
Vue.delete eliminar miembro
Eliminar el miembro de edad que acaba de agregar
Vue.delete(state,'age')
2.3 Getters
stateLos miembros pueden procesarse y pasarse al mundo exterior.
El método en Getters tiene dos parámetros predeterminados
- estado El objeto de estado en el objeto actual de VueX
- getters El objeto getters actual, usado para usar otros getters bajo los getters.
P.ej
getters:{
nameInfo(state){
return "姓名:"+state.name
},
fullInfo(state,getters){
return getters.nameInfo+'年龄:'+state.age
}
}
Llamar en componente
this.$store.getters.fullInfo
2.4 Acciones
Debido a mutationla operación asincrónica directamente en el método, los datos dejarán de ser válidos. Por lo tanto, se proporcionan acciones para realizar específicamente operaciones asincrónicas y, finalmente, enviar mutationmétodos.
ActionsEl método tiene dos parámetros predeterminados
contextObjeto de contexto (equivalente a esto en la función de flecha)payloadParámetros de montaje
Por ejemplo, ejecutamos2.2.2eleditmétodo en la sección después de dos segundos
Dado que setTimeoutes una operación asincrónica, debe usaractions
actions:{
aEdit(context,payload){
setTimeout(()=>{
context.commit('edit',payload)
},2000)
}
}
Llame al componente:
this.$store.dispatch('aEdit',{
age:15})
Mejorar:
Dado que es una operación asincrónica, podemos encapsular nuestra operación asincrónica como un Promiseobjeto
aEdit(context,payload){
return new Promise((resolve,reject)=>{
setTimeout(()=>{
context.commit('edit',payload)
resolve()
},2000)
})
}
2.5 Modelos
Cuando el proyecto es grande y el estado es muy grande, se puede adoptar el modo de gestión modular. Vuex nos permite dividir la tienda en módulos. Cada módulo tiene su propio state,, mutation, action, gettermódulos e incluso sub - anidado dividido de arriba a abajo de la misma manera.
models:{
a:{
state:{
},
getters:{
},
....
}
}
El estado de llamar al módulo a en el componente:
this.$store.state.a
Y submit o dispatchun método es el mismo que antes, y el método del tipo correspondiente en todos los módulos se ejecutará automáticamente:
this.$store.commit('editKey')
this.$store.dispatch('aEditKey')
2.5.1 Detalles del módulo
- El primer parámetro aceptado por los métodos en el módulo
mutationsygettersen el método es el estado dentro de su propio módulo local.
models:{
a:{
state:{
key:5},
mutations:{
editKey(state){
state.key = 9
}
},
....
}
}
gettersEl tercer parámetro del método es el estado del nodo raíz.
models:{
a:{
state:{
key:5},
getters:{
getKeyCount(state,getter,rootState){
return rootState.key + state.key
}
},
....
}
}
actionsEl método del método para obtener el estado del módulo local es context.state y el estado del nodo raíz es context.rootState
models:{
a:{
state:{
key:5},
actions:{
aEidtKey(context){
if(context.state.key === context.rootState.key){
context.commit('editKey')
}
}
},
....
}
}
Tres, estandarizar la estructura de directorios
No es razonable poner el conjunto storeen el index.jsmedio, por lo que es necesario dividirlo. El formato de directorio más adecuado es el siguiente:
store:.
│ actions.js
│ getters.js
│ index.js
│ mutations.js
│ mutations_type.js ##该项为存放mutaions方法常量的文件，按需要可加入
│
└─modules
Astore.js
El contenido correspondiente se almacena en el archivo correspondiente, como antes index.js, se almacena y se exporta store. stateIntente poner los datos en el index.jsmedio. Y moduleslos Astoremódulos locales si el estado de muchas palabras también se pueden desglosar.