uni-app下，通过maState辅助函数获取内容

当一个组件需要获取多个状态的时候，将这些状态都声明为计算属性会有些重复和冗余。为了解决这个问题，我们可以使用mapState辅助函数帮助我们生成计算属性，让你少按几次键：

/store/index.js

import Vue from 'vue'
import VueX from 'vuex'

Vue.use(VueX)

const store = new VueX.Store({
	state:{
		"username": "foo",
		"age": 18
	}
})
export default store

main.js

import Vue from 'vue'
import App from './App'
import store from './store'

Vue.config.productionTip = false
Vue.prototype.$store = store

App.mpType = 'app'

const app = new Vue({
	store,
    ...App
})
app.$mount()

第一种方式

<template>
	<view>
		{{username}} - {{age}}
	</view>
</template>

<script>
	import { mapState } from 'vuex'
	export default {
		data() {
			return {
				firstName: "Li"
			}
		},
		computed: mapState({
			username: state => state.username,
			age: state => state.age
		})
	}
</script>

第二种方式
当映射的计算属性的名称与state的子节点名称相同时，我们也可以给mapState传一个字符串数组

		computed: mapState([
			'username',
			'age'
		])

第三种方式
为了能能够使用this获取组件自己的data数据，必须使用常规函数
mapState函数返回的是一个对象，使用对象展开运算符将多个对象合并为一个，以使我们可以将最终对象传给computed属性，简化写法

<template>
	<view>
		{{username}} - {{age}}
	</view>
</template>

<script>
	import { mapState } from 'vuex'
	export default {
		data() {
			return {
				message: "hello world!",
				firstName: "Li"
			}
		},
		computed: {
			...mapState({ // 对象展开运算符
				username: function (state) {
					return this.firstName + '-' + state.username
				},
				age: state => state.age
			})
		}
	}
</script>