O coração de cada aplicação Vuex é a loja (armazém). "Store" é basicamente um recipiente que contém a maior parte de sua aplicação status (Estado) . Vuex e objetos globais simples têm uma diferente dois pontos seguintes:
-
Estado Vuex é sensível ao armazenamento. Quando o componente lê estado Vue da loja, a loja se as mudanças de estado, os respectivos componentes serão actualizados em conformidade obtido de forma eficiente.
-
Você não pode alterar diretamente o estado da loja. A única maneira de mudar o status da loja é explicitamente enviar (commit) mutação . De modo que podemos facilmente acompanhar as mudanças em cada estado, para que possamos alcançar algumas ferramentas para nos ajudar a entender melhor o nosso aplicativo.
# A loja mais fácil
Aplicação 1) Vuex no conjunto
<Template>
<Div class = "casa">
<P> {{isso. $ Store.state.count}} </ p>
<Button @ clique = "addFun"> aprendizagem divertido </ button>
<HelloWorld msg = "Bem-vindo ao seu Vue.js App" />
</ Div>
</ Template>
<Script>
// @ é um alias para / src
importação HelloWorld de "@ / componentes / HelloWorld.vue";
exportação padrão {
citar: "Home",
componentes: {
Olá Mundo
},
métodos: {
addFun () {
. Estes $ store.commit ( "incremento");
}
}
};
</ Script>
2) /store/index.js
visualização de importação de 'View'
importação Vuex de 'vuex'
Vue.use (Vuex)
exportar nova Vuex.Store padrão ({
Estado: {
count: 0
},
mutações: {
incremento (estado) {
state.count ++
}
},
ações: {
},
módulos: {
}
})
