无法找出为什么vuex getter ById doensim通过id

Question

我还是VUEX的新手，我正在关注本教程vuex store 我做的唯一不同的是我使用sequelize而不是像他那样使用mLab。

这就是我的吸气者的样子

export const companyGetters = {

allCompanies: (state, getters) => {
  return state.companies
},

companyById: (state, getters) => id => {
  if (getters.allCompanies.length > 0) {

    return getters.allCompanies.filter(c => c._id === id)[0]
  } else {
    return state.company
  }
}

与他所做的完全一样。

我的行动看起来像这样

companyById ({commit}, payload) {
    commit(COMPANY_BY_ID)
    axios.get(`${API_BASE}/companies/${payload}`).then(response => {
      console.log(payload, response.data)
      commit(COMPANY_BY_ID_SUCCESS, response.data)
    })
  }

接下来我的详细信息

<template>
  <div>
    <company-details :company="company" ></company-details>
  </div>

</template>

<script>
  import CompanyDetails from '../components/company/CompanyDetails'
  export default {
    created () {
      if (!this.company.companyName) {
        this.$store.dispatch('companyById', this.$route.params['id'])
      }
    },
    computed: {
      company () {
        return this.$store.getters.companyById(this.$route.params['id'])
      }
    },
    components: {
      'company-details': CompanyDetails
    }
  }
</script>

然后我的公司详细信息看起来像这样

<template>
  <v-ons-col style="width: 350px; float:left;">
      <v-ons-card>
          <h1>{{company}}</h1>
      </v-ons-card>
    </v-ons-col>
</template>
<script>
  export default {
    props: ['company']
  }
</script>

这是突变

  export const companyMutations = {
    [ALL_COMPANYS] (state) {
      state.showLoader = true
    },
    [ALL_COMPANYS_SUCCESS] (state, payload) {
      state.showLoader = false
      state.companies = payload
    },
    [COMPANY_BY_ID] (state) {
      state.showLoader = true
    },
    [COMPANY_BY_ID_SUCCESS] (state, payload) {
      state.showLoader = false
      state.company = payload
    }

这是我的行动

  allCompanies ({commit}) {
    commit(ALL_COMPANYS)
    axios.get(`${API_BASE}/companies`).then(response => {
      commit(ALL_COMPANYS_SUCCESS, response.data)
    })
  },
  companyById ({commit}, payload) {
    commit(COMPANY_BY_ID)
    axios.get(`${API_BASE}/companies/${payload}`).then(response => {
      console.log(payload, response.data)
      commit(COMPANY_BY_ID_SUCCESS, response.data)
    })

我的CompanyList看起来像这样

  <template>
  <div>
    <div class="companies">
      <div class="container">
        <template v-for="company in companies" >
          <company :company="company" :key="company.id"></company>
        </template>
      </div>
    </div>
  </div>
</template>

<script>
  import Company from './Company.vue'
  export default {
    name: 'companies',
    created () {
      if (this.companies.length === 0) {
        this.$store.dispatch('allCompanies')
      }
    },
    computed: {
      companies () {
        return this.$store.getters.allCompanies
      }
    },
    components: {
      'company': Company
    }
  }
</script>

Imported Company看起来像这样

<template>
    <v-ons-col style="width: 350px; float:left;">
            <router-link :to="'/details/'+company.id" class="company-link">
                <v-ons-card>
                    <img :src="company.imageURL" style="width:100% ;margin: 0 auto;display: block;">
                    <div class="title">
                        <b>{{company.companyName}}</b>
                    </div>
                    <div class="description">
                        {{company.description}}
                    </div>
                    <div class="content">
                      <!-- <template v-for="company in companies">
                        {{company}}
                    </template> -->
                    </div>
                </v-ons-card>
            </router-link>
    </v-ons-col>
</template>

<script>
export default {
    name: 'company',
    props: ['company']
}
</script>

所以，当我点击其中一个“公司”时，它想通过id得到它并显示详细信息然而在getter中这个返回getters.allCompanies.filter(c => c._id === id)[0]返回undefined，当我刷新页面然后它得到正确的公司并显示它，发生了什么请帮助。如果您需要更多信息，请询问