bencodezen / vue-enterprise-boilerplate

An ever-evolving, very opinionated architecture and dev environment for new Vue SPA projects using Vue CLI.
7.77k stars 1.32k forks source link

Falling toBeAViewComponent when set in head() async data #115

Closed sovofeel closed 5 years ago

sovofeel commented 5 years ago

I'm using ssr and try to set data in head()

test falling, but code works fine

store.js

  async fetchMeta({ commit }) {
    return axios
      .get(`/api/meta`)
      .then(({ data }) => {
          commit('SET_SEO', data)
      })
  },

category.vue

 async asyncData() {
    await store.dispatch('fetchMeta')
  },
  computed: {
    ...mapState({
       seo: state => state.seo
    }),
}

stacktrace

 ● @views/category › Valid view component

    TypeError: Cannot read property 'seo_title' of undefined

      43 |   head() {
      44 |     return {
    > 45 |       title: this.seo.seo_title,
         | ^
      46 |       meta: [
      47 |         { name: 'description', content: this.seo.seo_description },
      48 |         { name: 'keywords', content: this.seo.seo_keywords }

      at Object.head (src/views/category.vue:45:1)
      at apply (tests/unit/matchers.js:58:24)
      at Object.definesAPageTitleAndDescription (tests/unit/matchers.js:32:24)
      at Object.throwingMatcher [as toBeAViewComponent] (node_modules/expect/build/index.js:320:33)
      at Object.toBeAViewComponent (src/views/category.unit.js:49:22)
chrisvfritz commented 5 years ago

This looks more like an individual application issue than having to do specifically with the boilerplate. For these, my recommendation is Stack Overflow, forum.vuejs.org, or chat.vuejs.org.