Почему при использовании vuex mapState хранится в вычислениях, а не в данных?

Question

Я только что выполнил очень быструю простую демонстрацию, используя vuex + Vue.js, и теперь у меня есть код магазина ниже:

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 );
    }
  }
});

Теперь, когда я использую этот магазин и импортирую состояние в компонент, я делаю следующее:

import { mapState } from 'vuex'; 

и свойство computed внутри компонента: -

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

Но почему ...mapState помещается внутрь computed вместо data? Разве в данных не хранятся все свойства, относящиеся к компоненту?

Answer 1

Таким образом, вычисляемое свойство - это, по сути, любое свойство, связанное с компонентом, которое не является простым фрагментом информации, хранящейся в памяти, например строкой или числом или объектом JS.

Поскольку Vue должен войти в Vuex и проверить, что это такое. $ Store.state.title, это считается вычислением, что делает его вычисляемым свойством, даже если вы сами не реализуете вычисления, как в примерах на путеводителе Vue.