Vuex的Getter学习

Vuex 的 Getter 学习

  若要从 store 中的 state 中派生出一些状态，Vuex 允许我们在 store 中定义“getter”（可以认为是 store 的计算属性）。就像计算属性一样，getter 的返回值会根据它的依赖被缓存起来，且只有当它的依赖值发生了改变才会被重新计算。


目录：

---

例子

  新建一个 store.js 文件用于创建 store 实例：

// store.js
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex);

const store = new Vuex.Store({
    state: {
        firstName: 'kobe',
        lastName: 'bryant'
    },
    getters: {
        // Getter 接受 state 作为其第一个参数：
        fullName: state => {
            return `${state.firstName} ${state.lastName}`;
        }
    }
})

export default store

  在组件 App.vue 中获取 getters 对象：

// App.vue
<template>
    <!-- ... -->
</template>
<script>
    import store from "./store.js";  // 导入 store 实例

    export default {
        data() {
            return {}
        },
        created:function(){
            // Getter 会暴露为 store.getters 对象：
            console.log(store.getters.fullName);    // kobe bryant
        }
    }
</script>

---

将 store 注入到每个子组件

  Vuex 通过 store 选项，提供了一种机制将状态从根组件“注入”到每一个子组件中（需调用 Vue.use(Vuex)）：

// main.js
import Vue from 'vue'
import App from './App.vue'
import Vuex from 'vuex'  
import store from './store.js'

Vue.use(Vuex);      // 调用Vue.use(Vuex)

new Vue({
    el: '#app',
    store，    // “注入”
    render: h => h(App)
})

  再在 App.vue 中获取 getters 对象：

// App.vue
<template>
    <!-- ... -->
</template>

<script>
    // import store from "./store.js";  // 现在可以不用在每个 vue 组件中导入 store 实例了

    export default {
        data() {
            return {}
        },
        created:function(){
            console.log(this.$store.getters.fullName);    // kobe bryant
        }
    }
</script>

---

传参

  通过让 getter 返回一个函数，来实现给 getter 传参：

// store.js
const store = new Vuex.Store({
    state: {
        players: [{
                    name: 'Kobe',
                    number: 24
                }, {
                    name: 'LeBron',
                    number: 23
                }]
    },
    getters: {
        getPlayer: (state) => (name) => {
            return state.players.find( player => player.name === name );
        }
    }
})

// App.vue
created:function(){
        let player = this.$store.getters.getPlayer("LeBron")
        console.log(JSON.stringify(player));    // {"name":"LeBron","number":23}
}

---

mapGetters 辅助函数

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

// App.vue
import { mapGetters } from 'vuex'

export default {
    // ...
    created:function(){
        console.log(this.fullName);     // kobe bryant
    }
    computed: {
        // 使用对象展开运算符将 getter 混入 computed 对象中
        ...mapGetters([
            'fullName'
            // ...
        ])
  }
}

  如果你想将一个 getter 属性另取一个名字，使用对象形式：

// App.vue
created:function(){
    console.log(this.getAllStar);    // kobe bryant
    console.log(this.$store.getters.fullName);  // kobe bryant
},
computed: {
    ...mapGetters({
        // 映射 `this.getAllStar` 为 `store.getters.fullName`
        getAllStar: 'fullName'
    })
}