The heart of every Vuex application is to store (warehouse). "Store" is basically a container that contains most of your application status (State) . Vuex and simple global objects have a different following two points:
-
Vuex state is responsive to storage. When the component reads Vue state from the store, the store if the state changes, the respective components will be updated accordingly obtained efficiently.
-
You can not directly change the state of the store. The only way to change the status of the store is explicitly submit (the commit) mutation . So that we can easily track changes in each state, so that we can achieve some tools to help us better understand our application.
# The easiest Store
Application 1) Vuex in the assembly
<template>
<div class="home">
<p>{{ this.$store.state.count }}</p>
<Button @ click = "addFun"> fun learning </ button>
<HelloWorld msg="Welcome to Your Vue.js App" />
</div>
</template>
<script>
// @ is an alias to /src
import HelloWorld from "@/components/HelloWorld.vue";
export default {
name: "Home",
components: {
HelloWorld
},
methods: {
addFun() {
this.$store.commit("increment");
}
}
};
</script>
2) /store/index.js
Import view from 'View'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
state: {
count : 0
},
mutations: {
increment (state){
state.count ++
}
},
actions: {
},
modules: {
}
})
