CODEWITHSUNDEEP
vue.jsvuex
Alexander Solonik
Alexander Solonik

Reputation: 10250

Why using vuex is mapState being stored in computed instead of data?

I just viped out a really quick simple demo using vuex + Vue.js and so i have the below store code as of now:

export default new Vuex.Store({
  state: {
      title : 'I am the title ! Tanos avengers: End game !',
      links : [
        'http://amazon.com',
        'http://google.com',
        'http://flipkart.com',
      ]
  },
  getters : {
    countLinks : state => {
      return state.links.length;
    }
  },
  mutations: {
    ADD_LINK : ( state , link ) => {
      state.links.push( link );
    }
  }
});

Now when i'am using this store and importing the state in a component i do the following :

import { mapState } from 'vuex';

and the inside the computed property of the component :-

computed : {
    ...mapState({ 
      title : 'title', 
      links : 'links' 
    })
},

But why is ...mapState being put inside computed instead of data ? is't data where all the properties related to a component should be stored ?

Upvotes: 0

Views: 160

Answers (1)

LShapz
LShapz

Reputation: 1766

So a computed property is basically any property related to the component that isn't just a straightforward piece of information stored in memory, like a string or number or a JS object.

Since Vue has to go into Vuex and check what this.$store.state.title is, that counts as a computation, which makes it a computed property, even though you aren't implementing the computation yourself like in the examples on the Vue guide.

Upvotes: 1

Related Questions