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??