How to use `mapGetters` in the computed section only, without passing it to data ? And what name should I pass to the set?

Question

This is a screenshot from another question about mapGetters

Link to the question I took the screen from

In Vue.js I saw an answer to a post.

It said :

In your Component

computed: {
        ...mapGetters({
                nameFromStore: 'name'
            }),
        name: {
           get(){
             return this.nameFromStore
           },
           set(newName){
             return newName
           } 
        }
    }

And I wonder why newName is a "new" name ? And also what it looks like to call the getter in the template html section. Do we use the nameFromStore like a data in the template ?

I tried to see how getters are used but what I found didn't look like this structure. The things I found looked like someone using a value in data that returns this.$store.getters.nameFromStore but I don't want to use the data and do it all in the computed instead like the picture I attached if someone can please help me ?

Answer 1

If you simply want to use mapGetters to access data store in vuex state you can do it as you have it above, without the get/set computed. I'm not sure what the intention of that get/set computed property was but it doesn't look like it would work as expected.

Try this:

// vuex index.js
// ...
getters: {
  getAnimals: state => {
    return state.items.filter(i => i.type === 'animal');
  }
}


// your component.vue
import { mapGetters } from 'vuex'

export default {
  // ...
  computed: {
    ...mapGetters(['getAnimals']) // access using this.getAnimals
    // or
    ...mapGetters({ animals: 'getAnimals' }) // access using this.animals
  }
}

The bennefit to using it this way is being a computed property, when the items change in vuex state, they will be recomputed, and your component will react to this change. Hopefully this is a clear explanation.

The vue docs: https://vuex.vuejs.org/guide/getters.html#method-style-access