vuex

1、  vuex中的 getters类似是Vuex中的计算属性，也具有缓存功能：如果state中的数据得到了改变，那么getters中的属性的值也会发生改变，如果state的值没有发生任何变化，那么getters中的属性的值就不会发生改变。

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
 
export default new Vuex.Store({
	//创建一个对象来保存应用启动时的初始状态
	state:{
		 // 应用启动时， count置为0
		count:0,
		todos: [
			{ id: 1, text: '水果类', done: true },
			{ id: 2, text: '苹果', done: true },
			{ id: 3, text: '苹果', done: false}
	    ]
	},
	getters: {
		doneTodos: state => {//通过方法访问
		  return state.todos.filter(todo => todo.done)
		},
		doneTodosCount: (state, getters) => {//通过属性访问
    		return getters.doneTodos.length
  		}
	}
})

2、通过computed计算属性和@change="changefn"两种方法来渲染表格和对表格信息进行筛选。

<template>
    <div>
        <P>通过属性访问：{{doneTodosCount}}</p>
        <P>通过方法访问：{{todos}}</p>
    </div>
</template>
 
<script>
/*
1.mapState 辅助函数
当映射的计算属性的名称与 state 的子节点名称相同时，
我们也可以给 mapState 传一个字符串数组
*/
import { mapState } from 'vuex'
export default {
	computed:{
		todos:function() {  //通过方法访问
            return this.$store.getters.doneTodos;
        },
        doneTodosCount () {
		    return this.$store.getters.doneTodosCount
		}
	}
}
</script>

3、使用对象展开运算符将 getter 混入 computed 对象中

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

②mapGetters 辅助函数仅仅是将 store 中的 getter 映射到局部计算属性：

<template>
    <div>
        <h4>测试1：Count is {{count}}</h4>
        <P>通过属性访问：{{doneTodosCount}}</p>
        <P>通过方法访问：{{doneTodos}}</p>
    </div>
</template>
<script>
import {mapGetters} from 'vuex'
export default {
	computed:{
		count(){
		    return this.$store.state.count
		},
		...mapGetters([
			'doneTodos',
			'doneTodosCount'
		])
	}
}
</script>