Home

index.vue

<template lang="pug">
  .container
    .columns
      .column.is-one-third.card.quick-search-box
        header.card-header.hfx-center-v
          label 查找养老机构
          span.stat-count-wrapper
            | {{currentCityName}}共有
            span.stat-count-value {{tpaNumbers}}
            |家
</template>
<script>
  import { mapGetters } from 'vuex'
  export default {
    async fetch ({store}) {
      await store.dispatch('tpa/fetchStats')
    },
    computed: {
      ...mapGetters({
        currentCityName: 'currentCityName',
        tpaNumbers: 'tpa/numbers'
      })
    }
  }
</script>

in the page I dispatch the vuex action ‘tpa/fetchStats’ in the fetch()

my vuex

import axios from 'axios'

export const state = () => ({
  apiFragment: '/apps/99alive/tpa',
  _columns: [
    {name: '首页', path: '/tpa'},
    {name: '查找', path: '/tpa/query'},
    {name: '对比', path: '/tpa/compare'},
  ], // 当前频道栏目
  _stats: { tpaNumbers: 11 }
})

export const getters = {
  columns (state) {
    return state._columns
  },
  numbers (state) {
    console.log('>>>>>>>>>>', state._stats.tpaNumbers||0)
    return state._stats.tpaNumbers || 0
  }
}
export const mutations = {
  setStats (state, stats) {
    console.log('setStats:', stats)
    stats && (state._stats = stats)

  }
}

export const actions = {
  async fetchStats ({state, commit}) {
    let { data: { ret } } = await axios(`${state.apiFragment}/stats`)
    console.log('---fetch---')
    commit('setStats', ret)
  }
}

first is ok

and when i change other route and route back again,it’s error

anyone HELP??