VueX中，使用Getters对数据进行缓存

Getters可以认为是store的计算属性，对state的加工，是派生出来的数据。
就像computed计算属性一样，getter返回的值会根据他的依赖被缓存起来，且只有当它的依赖值发生改变才会被重新计算。
可以在多组件中共享getters函数，这样做还可以提高运行效率。

在uni-app项目目录下，store目录index.js文件下：

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

Vue.use(VueX)

const store = new VueX.Store({
	state:{
		"username": "foo",
		"age": 18,
		todos:[
			{id: 1,
			text: '我是内容一',
			done: true},
			{id: 2,
			text: '我是内容二',
			done: false}
		]
	},
	getters: {
		doneTodos: state => {
			return state.todos.filter(todo => todo.done)
		},
		doneTodosCount: (state, getters) => {
			// state: 可以访问数据
			// getters: 访问其他函数，等同于store.getters
			return getters.doneTodos.length
		},
		getTodoById: (state) => (id) => {
			return state.todos.filter(todo => todo.id === id)
		}
	}
})
export default store

1、通过属性和$store访问

<template>
	<view>
		{{username}} - {{age}}
		<view v-for="(item, index) in todos">
			<view>{{item.id}}</view>
			<view>{{item.text}}</view>
			<view>{{item.done}}</view>
		</view>
		<view>{{doneTodosCount}}</view>
		<view>{{doneCount}}</view>
	</view>
</template>

<script>
	import store from '@/store/index.js'
	import { mapState } from 'vuex'
	import { mapGetters } from 'vuex'
	export default {
		data() {
			return {
				message: "hello world!",
				firstName: "Li"
			}
		},
		computed: {
			todos() {
				// return store.getters.doneTodos // 通过属性访问
				// return this.$store.getters.doneTodos // 通过@store访问
				return this.$store.getters.getTodoById(1) // 通过方法传参访问
			}
	}
</script>

2、访问mapGetters访问

<template>
	<view>
		{{username}} - {{age}}
		<view v-for="(item, index) in todos">
			<view>{{item.id}}</view>
			<view>{{item.text}}</view>
			<view>{{item.done}}</view>
		</view>
		<view>{{doneTodosCount}}</view>
		<view>{{doneCount}}</view>
	</view>
</template>

<script>
	import store from '@/store/index.js'
	import { mapState } from 'vuex'
	import { mapGetters } from 'vuex'
	export default {
		data() {
			return {
				message: "hello world!",
				firstName: "Li"
			}
		},
		computed: {
			todos() {
				// return store.getters.doneTodos
				// return this.$store.getters.doneTodos
				return this.$store.getters.getTodoById(1)
			},
			...mapState({
				username: function (state) {
					return this.firstName + '-' + state.username
				},
				age: state => state.age
			}),
			// 使用对象展开运算符将getter混入computed对象中
			...mapGetters([
				'doneTodos',
				'doneTodosCount'
			])
			// 把this.doneCount映射为this.$store.getters.doneTodosCount
			...mapGetters({
				doneCount: 'doneTodosCount'
			})
		}
	}
</script>