Vuex的state、getter总结(根据官网的一些总结和自己的一些理解)_官网上看到的一些总结

一、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'

        })