vue.js - VueJs / Vuex：渲染项目列表

Question

我正在尝试从我的vuex 商店呈现报价列表。问题是当我加载我的优惠列表页面时，它们没有呈现。

这是我的代码：

提供.js

export const namespaced = true

export const state = {}

export const mutations = {

  [types.UPDATE_OFFERS] (state, offers) {
    Object.assign(state, offers)
  }
}

export const actions = {

  async fetchOffers ({ commit }) {
    const { data } = await axios.get('/api/offers')
    commit(types.UPDATE_OFFERS, data)
  }
}

offer.vue（我的页面组件）

<template>

            <div>

              <div v-if="offers"
                   v-for="offer in offers"
                   :key="offer.id">

                <div>

                  <div>

                    <router-link :to="{ name: 'offer', params: { offer: offer.id } }">
                       {{ offer.project }}
                    </router-link>

                  </div>

                  <div>

                    <div v-if="offer.versions[0] && offer.versions[0].status == 'edition'">
                       Validate the offer
                    </div>

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

            </div>
</template>

<script>
import { mapState, mapGetters } from 'vuex'

export default {

  computed: {
    ...mapState(['offers'])
  },

  beforeMount () {
    this.$store.dispatch('offers/fetchOffers')
  }
}
</script>

当我加载页面时，我可以看到商店加载了优惠，但页面没有呈现它们。奇怪的是，当我加载页面offer然后另一个页面（例如createAnOffer）然后我回到offer 时，它会呈现 offer 属性。

我试过 beforemount、beforeCreate、mounted、created。

我承认我不知道发生了什么。

任何提示？

谢谢您的回答。

路易斯

标签： vue.jsvuex