Vuex module mapState

by Max Sinev

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.0-alpha.8/vue.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vuex/3.0.1/vuex.min.js"></script>
<div id="app">
  <p>{{ prop1 }}</p>
  <p>{{ prop2 }}</p>
</div>

JavaScript 1.7

const state1 = {
    prop1: 1
};

const state2 = {
	prop2: 2
};

const store = new Vuex.Store({
	modules: {
	  myModule1: {
    	state: state1
    },
    myModule2: {
      namespaced: true,
    	state: state2
    }
  }
});

new Vue({
	el: '#app',
  store: store,
  computed: {
    // non-namespaced
  	...Vuex.mapState({ prop1: state => state.myModule1.prop1 }),
    // namespaced
    ...Vuex.mapState('myModule2', ['prop2'])
  }
})