vue mapState,mapMutations,mapGetters

main.js

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import store from './store'
import App from './vuex'
import router from './router'
import vuex from './vuex.vue'

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  store,
  router,
  render: xx=>xx(vuex)
})

store.js

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)

const state={
	count:44
}

const mutations={
	add(state,n){
		state.count+=n.b
	},
	plus(state){
		state.count--
	}
}

export default new Vuex.Store({
	state,
	mutations
})

vuex.vue

<template>
	<div id="app">
		<h1>Hello Vuex</h1>
		<p>{{$store.state.count}} - {{count}}</p>
		<p>
			<button @click="add({b:10})">+</button>
			<button @click="plus">-</button>
		</p>
	</div>
</template>

<script>
	import {mapState,mapMutations} from 'vuex';
	export default{
		name:'App',
		computed:mapState({
			count:state=>state.count
			//count:'count'
		}),
		methods:mapMutations([
			'add',
			'plus'
		])
	}
</script>

------------------------------------------------------------------------

mapGetters

store.js

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)

const state={
	count:44
}

const mutations={
	add(state,n){
		state.count+=n.b
	},
	plus(state){
		state.count--
	}
}

const getters = {
	count:function(state){
		return state.count+=100
	}
}

export default new Vuex.Store({
	state,
	mutations,
	getters
})

vuex.vue

<template>
	<div id="app">
		<h1>Hello Vuex</h1>
		<p>{{$store.state.count}} - {{count}}</p>
		<p>
			<button @click="add({b:10})">+</button>
			<button @click="plus">-</button>
		</p>
	</div>
</template>

<script>
	import {mapState,mapMutations,mapGetters} from 'vuex';
	export default{
		name:'App',
		computed:({
			...mapState([
				"count",
			]),
			...mapGetters([
				"count"
			])
		}),
		methods:mapMutations([
			'add',
			'plus'
		])
	}
</script>