Получатели не обновляются при изменении состояния магазина

Question

Вот мое хранилище vuex

export default {
  namespaced: true,

  state: {
    feed: [],
  },

  getters: {
    feed: state => state.feed
  },

  mutations: {
    SET_FEED(state, feed) {
      state.feed = feed
    }
  },

  actions: {
    async fetchNews({commit}) {
      const feed = await fetchNewsFeed()
      commit('SET_FEED', feed)
    }
  }
}

async function fetchNewsFeed() {

  return new Promise((resolve) => {
    setTimeout(() => {
      return resolve([1, 2])
    }, 500)
  })
}

А это мой компонент:

<template>
<div>
</div>
</template>

<script>

import { mapGetters, mapActions } from 'vuex';

export default {

name: 'News',

computed: {
    ...mapGetters('News', {
    newsFeed: 'feed'
    }),

    feed() {
    console.log(this.newFeed)
    return this.newsFeed
    }
},

methods: {
    ...mapActions('News', {
    fetchNewsFeed: 'fetchNews'
    })
},

async mounted() {
    await this.fetchNewsFeed()
}
}
</script>

<style scoped lang='scss'>
</style>

Свойство фида вычисляется не вычисляется. Состояние определенно устанавливается после истечения установленного тайм-аута.

Я сделал эту работу с наблюдателем, и кажется, что когда я читаю его с помощью наблюдателя, вычисляемое свойство обновляется.

Любая помощь ценится

Answer 1

Использование ...mapState вместо ...mapGetters имеет больше смысла здесь. Взгляните на Отличия б / н mapState, mapGetters, mapActions, mapMutations in Vuex