// App.vue
<template>
<div id="app">
</div>
</template>
<script>
export default {
name: 'app'
}
</script>
<style>
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
// main.js
import Vue from 'vue'
import Vuex from 'vuex'
import App from './App.vue'
Vue.use(Vuex)
Vue.config.productionTip = false
const moduleA = {
state: {
count: 3
},
mutations: {
increment (state) {
state.count++;
}
},
getters: {
doubleCount (state) {
return state.count * 2;
}
},
actions: {
incrementIfOdd ({ state, commit }) {
if(state.count % 2 === 1) {
commit('increment');
}
}
}
};
const moduleB = {
state: {
count: 8
},
mutations: {
},
getters: {
},
actions: {
}
};
const store = new Vuex.Store({
modules: {
a: moduleA,
b: moduleB
},
state: {
count: 2
},
mutations: {
},
getters: {
},
actions: {
}
});
new Vue({
render: h => h(App),
store
}).$mount('#app')
window.console.log( store.state.a.count );
store.commit('increment');
window.console.log( store.state.a.count );
// window.console.log( store.state.b.count );
