The core part of the Vuex store is in store.js . It is as follow:

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const store = new Vuex.Store({
state: {
count: 0
},
mutations: {
increment(state) {
state.count++
},
reset(state) {
state.count = 0;
},
disappoint(state) {
state.count = 9;
}
},
getters: {
getCount: state => {
return state.count
}
}
})
export default store;

Then in each component, you call store.commit with the name of the function in mutations to change state.count . For example, in City.vue , I have the following methods block:

methods: {
next() {
store.commit("increment");
},
disappoint() {
store.commit("disappoint");
}
}

These 2 functions will change state.count when called, which the latest value gets propagated back to any component that has this block:

computed: {
count() {
return store.state.count;
}
}

like Home.vue . Since Home.vue is where the page components are conditionally displayed with this block:

<div v-if="continent && country && region">
<where-continent v-if="count == 0"></where-continent>
<continent v-if="count == 1" :continent="continent"></continent>
<where-country v-if="count == 2"></where-country>
<country v-if="count == 3" :country="country"></country>
<where-region v-if="count == 4"></where-region>
<region v-if="count == 5" :region="region"></region>
<where-city v-if="count == 6"></where-city>
<city v-if="count == 7" :city="city"></city>
<win v-if="count == 8"></win>
<disappoint v-if="count == 9"></disappoint>
</div>

the page gets updated

Written by

Web developer. Subscribe to my email list now at http://jauyeung.net/subscribe/. Email me at hohanga@gmail.com

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store