vuex之getter示例说明

<div id="app">
    <Todo></Todo>
    <Todo1></Todo1>
    <Todo2></Todo2>
</div>

<script>

    /*const store = new Vuex.Store({
        state: {//用一个对象就包含了全部的应用层级状态。(唯一数据源)
            todos: [
                { id: 1, text: '哈哈哈', done: true },
                { id: 2, text: '嘿嘿嘿', done: false }
            ]
        },
    })
    //由于 Vuex 的状态存储是响应式的,从 store 实例中读取状态最简单的方法就是在计算属性
    const Todo = {
        template: `<div>列表一<ul><li v-for="todo in todos">{{todo.text}}</li></ul></div>`,
        computed: {
            todos () {
                return this.$store.state.todos;
                //或者做一些其他处理
            }
        }
    }
    const Todo1 = {
        template: `<div>列表二<ul><li v-for="todo in todos">{{todo.text}}</li></ul></div>`,
        computed: {
            todos () {
                return this.$store.state.todos;
                //或者做一些其他处理
            }
        }
    }
    const Todo2 = {
        template: `<div>列表三<ul><li v-for="todo in todos">{{todo.text}}</li></ul></div>`,
        computed: {
            todos () {
                return this.$store.state.todos;
                //或者做一些其他处理
            }
        }
    }

    const app = new Vue({
        el: '#app',
        // 把 store 对象提供给 “store” 选项，这可以把 store 的实例注入所有的子组件
        store,
        components: {Todo,Todo1,Todo2},
    })*/

    /*
    *
    * 以上的每个组件中都需要拿取store中的值，每个组件中都需要配置相同的计算属性，或者抽取一个共享函数引用他，都不是理想的方法
    * 所以getter诞生了
    * Vuex 允许我们在 store 中定义“getter”（可以认为是 store 的计算属性）。就像计算属性一样，getter 的返回值会根据它的依赖被缓存起来，且只有当它的依赖值发生了改变才会被重新计算。
    *
    * */
    /*const store = new Vuex.Store({
        state: {
            todos: [
                { id: 1, text: '...', done: true },
                { id: 2, text: '...', done: false }
            ]
        },
        getters: {
            todos: state => {
                return state.todos;
            }
        }
    })*/
    const store = new Vuex.Store({
        state: {//用一个对象就包含了全部的应用层级状态。(唯一数据源)
            todos: [
                { id: 1, text: '哈哈哈', done: true },
                { id: 2, text: '嘿嘿嘿', done: false },
                { id: 3, text: '呵呵呵', done: true }
            ]
        },
        getters:{//就是store中的计算属性，避免组建中重复编写的内容；减少冗余代码
            todosList: state => {//通用的方法    在所有的组件中都可以通过计算属性中 this.$store.getters.todosList 获取的值
                return state.todos.filter(todo => todo.done)
                //或者做一些其他数据处理
            }
        }
    })
    //通过属性访问
    console.log(store.getters.todosList)

    //由于 Vuex 的状态存储是响应式的,从 store 实例中读取状态最简单的方法就是在计算属性
    const Todo = {
        template: `<div>{{doneTodosCount}}</div>`,
        computed: {
            doneTodosCount(){
                return this.$store.getters.todosList.length;
            }
        }
    }
    const Todo1 = {
        template: `<div>列表二<ul><li v-for="todo in todosList">{{todo.text}}</li></ul></div>`,
        computed: {
            todosList () {
                return this.$store.getters.todosList
            }
        }
    }
    const Todo2 = {
        template: `<div>列表三<ul><li v-for="todo in todosList">{{todo.text}}</li></ul></div>`,
        computed: {
            todosList () {
                return this.$store.state.todos
            }
        }
    }

    const app = new Vue({
        el: '#app',
        // 把 store 对象提供给 “store” 选项，这可以把 store 的实例注入所有的子组件
        store,
        components: {Todo,Todo1,Todo2},
    })


    /*
    *
    * 通过方法访问
    * 通过让 getter 返回一个函数，来实现给 getter 传参。
    * 在你对 store 里的数组进行查询时非常有用。
    *
    * */

    /*getters: {
        // ...
        getTodoById: (state) => (id) => {
            return state.todos.find(todo => todo.id === id)
        }
    }*/

    //组件中获取值
    /*methods:{
        find(n){
            store.getters.getTodoById(n) // -> { id: 2, text: '...', done: false }
        }
    }
    computed:{
        fil(){
            store.getters.getTodoById(2)
        }
    }*/

    //mapGetters 辅助函数

    console.log(Vuex.mapGetters);

    /*模块化开发用import
    import { mapGetters } from 'vuex'*/

    export default {
        // ...
        computed: {
            // 使用对象展开运算符将 getter 混入 computed 对象中(此处接收一个getter的数组，也可以接收一个对象，下边的例子)
                ...mapGetters([
                    'doneTodosCount',
                    'anotherGetter',
                    // ...
                ])
        }
    }
    //如果你想将一个 getter 属性另取一个名字，使用对象形式：(就是setter的名字和组件中的名字不一样的时候这么用)

    export default {
        // ...
        computed: {
            // 使用对象展开运算符将 getter 混入 computed 对象中(此处接收一个getter的数组，也可以接收一个对象，下边的例子)
                ...mapGetters({
                    // 把 `this.doneCount` 映射为 `this.$store.getters.doneTodosCount`
                    doneCount: 'doneTodosCount',
                    //....

                }),
                //这里还可以写自己的计算属性
        }
    }
</script>