一、state
1、由于我们期望的是获得的状态是响应的，所以我们最好在组件的计算属性中用return，返回所用的状态值。
2、将store注入到根组件(app)中(跟methods一致)，根组件及以下的所有子组件就都能使用store里的状态值，(this.$store.state.具体字段)。
3、当一个组件需要获取多个状态的时候，将这些状态都声明为计算属性会有些重复和冗余。为解决这个问题，我们可以使用mapState辅助函数帮助我们生成计算属性
computed:mapState({
count : state =>state.count
})
当映射的计算属性的名称与state的子节点名称相同时，也可以给mapState传一个字符串数组
computed : mapState(
[ "count"]
)
4、mapState函数返回的是一个对象，如果将它与局部计算属性混合使用，需要使用一个工具函数将多个对象合并为一个，以使我们可以将最终对象传给computed属性
computed : {
...mapState({
......
})
}
二、getters
Vuex允许我们在store中定义getter，就像计算属性一样，getter的返回值会根据它的依赖值被缓存起来，且只有当它的依赖值发生了改变才会被重新计算
1、getter接受state作为其第一个参数
getters:{
doneTodos:state=>{
return state.todos.filter.....
}
}
(一)、通过属性访问
getter会暴露为store.getters对象，可以用以属性的形式访问这些值
store.getters.doneTodos
getter也可以接受其他的getter作为第二个参数
getters:{
doneTodosCount:(state,getters)=>{
return getters.doneTodos.length
}
}
可以很容易地在任何组件中使用它
computed：{
doneTodosCount(){
return this.$store.getters.doneTodosCount
}
}
*getter在通过属性访问时是作为Vue的响应式系统的一部分缓存其中的
（二）通过方法访问
1、通过让getter返回一个函数，来实现给getter传参。对store里的数组进行查询时非常有用
getters:{
getTodoById:(state)=>(id)=>{
return state.todos.find(todo=>todo.id===id)
}
}
store.getters.getTodoById(2) 返回todos数组对象中的下标为2的对象
*getter在通过方法进行访问时，每次都会进行调用，而不会缓存结果
2、mapGetters辅助函数
mapGetters辅助函数仅仅是将store中的getter映射到局部计算属性
import { mapGetters } from 'vuex'
export default{
computed:{
//使用对象展开运算符将getter混入computed对象中
...mapGetters([
'doneTodosCont',
'anotherGetter'
])
}
}
如果想将一个getter属性另取一个名字，使用对象形式
...mapGetters({
//把' this.doneCount '映射为' this.$store.getters.doneTodosCount'
dontCount : 'doneTodosCount'
})
322
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
