vuex组件获取state内数据与时时计算的简便写法

效果图如下：

普通方法：

store.js代码如下：

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
	//状态数据
  state: {
		name: '我是store的数据',
		num1: 11,
		num2: 22
  },
	//getters可以认为是store的计算属性
	getters:{
		num1(state){
				return state.num1
		},
		num2(state){
				return state.num2
		},
	},
	//存放同步函数方法
  mutations: {
		//参数1:是状态数据 参数2:n默认为1
		incrementC(state, n=1){
			state.num1 +=n
		},
		//箭头函数写法
		decrementC:(state, n=1)=>{
			state.num2 -=n
		}
  },
	//存放异步函数方法
  actions: {
  }
})

引入store数据组件app.vue代码如下：

<template>
  <div id="app">
		<!-- 匹配到的路由组件 -->
		<!-- <router-view /> -->
		<h1>下面是在created生命周期时获取store内的数据</h1>
		<h3>{{msg}}</h3>
		<hr>
		<h1>下面是获取store内的数据(不是计算属性)</h1>
		<h2>num1:{{num11}} | num2:{{num22}}</h2>
		<hr>
		<h1>下面是执行store内方法改变store内的数据(组件内更改store数据的唯一方法)</h1>
		<h1><input type="button" value="增加num1" @click="incrementC(1)">
		{{num1}}
		<input type="button" value="减少num2" @click="decrementC(1)">
		{{num2}}
		</h1>
  </div>
</template>

<script>
export default {
  name: 'app',
	//这里面存放数据
	data(){
		return{
			msg:'默认值'
		}
	},
	//生命周期函数
	created(){
		this.msg = this.$store.state.name;
		this.num11 = this.$store.state.num1;
		this.num22 = this.$store.state.num2;
	},
	//获取计算数据
	computed:{
		num1(){
			return this.$store.getters.num1;
		},
		num2(){
			return this.$store.getters.num2;
		}
	},
	methods:{
		incrementC(n){
			this.$store.commit('incrementC',n);
		},
		decrementC(n){
			this.$store.commit('decrementC',n);
		}
	}
}
</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>

简便方法： (引入vuex辅助函数)

app.vue代码如下：

<script>
//引入vuex辅助函数
import {mapState,mapGetters,mapMutations} from 'vuex'
export default {
  name: 'app',
  components: {

  },
	//这里面存放数据
	data(){
		return{
			msg:'默认值'
		}
	},
	//生命周期函数
	created(){
		this.msg = this.$store.state.name;
		this.num11 = this.$store.state.num1;
		this.num22 = this.$store.state.num2;
	},
	//获取计算数据
	computed: mapGetters(['num1','num2']),
	//获取方法
	methods: mapMutations(['incrementC','decrementC']),
	//上面两种引入可以完全代替下面写法
	//获取计算数据
	// computed:{
	// 	num1(){
	// 		return this.$store.getters.num1;
	// 	},
	// 	num2(){
	// 		return this.$store.getters.num2;
	// 	}
	// },
	// methods:{
	// 	incrementC(n){
	// 		this.$store.commit('incrementC',n);
	// 	},
	// 	decrementC(n){
	// 		this.$store.commit('decrementC',n);
	// 	}
	// }
}
</script>