El corazón de cada aplicación Vuex es a la tienda (almacén). "Tienda" es básicamente un recipiente que contiene la mayor parte de su solicitud de estado (Estado) . Vuex y objetos globales simples tienen un diferente siguientes dos puntos:
-
Estado Vuex es sensible al almacenamiento. Cuando el componente lee estado Vue de la tienda, la tienda si los cambios de estado, los componentes respectivos se actualizarán en consecuencia obtenerse eficazmente.
-
No se puede cambiar directamente el estado de la tienda. La única manera de cambiar el estado de la tienda está explícitamente presente (el commit) mutación . De modo que podamos seguir fácilmente los cambios en cada estado, por lo que podemos lograr algunas herramientas para ayudar a comprender mejor nuestra aplicación.
# La tienda más fácil
Aplicación 1) Vuex en el conjunto
<Plantilla>
<Div class = "casa">
<P> {{esto. Store.state.count $}} </ p>
<Botón @ clic = "addFun"> aprendizaje divertido botón </>
<HelloWorld msg = "Bienvenido a su Vue.js App" />
</ Div>
</ Template>
<Script>
// @ es un alias para / src
importación de HelloWorld "@ / componentes / HelloWorld.vue";
por defecto de exportación {
Nombre: "Inicio",
componentes: {
Hola Mundo
},
métodos: {
addFun () {
. Estos $ store.commit ( "incremento");
}
}
};
</ Script>
2) /store/index.js
Importar de vista 'Vista'
importación de Vuex 'vuex'
Vue.use (Vuex)
exportar nueva Vuex.Store defecto ({
estado: {
count: 0
},
mutaciones: {
incremento (estado) {
state.count ++
}
},
acciones: {
},
módulos: {
}
})
