Getter learning of Vuex

   to derive some states from the state in the store, Vuex allows us to define "getter" (which can be considered as the calculation property of the store) in the store. Just like calculating properties, the return value of getter will be cached according to its dependency, and will be recalculated only when its dependency value changes.


Catalog:

Example

Create a new store.js file to create a store instance:

// 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 accept state As its first parameter:
        fullName: state => {
            return `${state.firstName} ${state.lastName}`;
        }
    }
})

export default store

   get getters object in component App.vue:

// App.vue
<template>
    <!-- ... -->
</template>
<script>
    import store from "./store.js";  // Import store instance

    export default {
        data() {
            return {}
        },
        created:function(){
            // Getter is exposed as a store.getters object:
            console.log(store.getters.fullName);    // kobe bryant
        }
    }
</script>

Inject store into each subcomponent

   through the store option, Vuex provides a mechanism to "inject" state from the root component into each subcomponent (Vue.use(Vuex) needs to be called):

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

Vue.use(Vuex);      // Call Vue.use(Vuex)

new Vue({
    el: '#app',
    store，    // "Inject"
    render: h => h(App)
})

   then get the getters object in App.vue:

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

<script>
    // import store from "./store.js"; / / now you can not import store instances in each vue component

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

Biography

   pass parameters to getter by returning a function to 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 helper function

   use mapGetters helper function to map getter in store to local calculation property:

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

export default {
    // ...
    created:function(){
        console.log(this.fullName);     // kobe bryant
    }
    computed: {
        // Using object expansion operator to mix getter into computed object
        ...mapGetters([
            'fullName'
            // ...
        ])
  }
}

   if you want to give a getter property another name, use the object form:

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