vue状态缓存问题

Question

这是写的一个tab切换，点击的时候，通过父传子的storyList来改变内容，点击的时候跳转到详情页，返回详情页的时候怎么返回之前选择状态展示对应的内容

<ul class="hw_ul">
  <li v-for="(item,index) in hwList" :key="index"
      :class="index == rangeCode ? 'act' : ''"
      @click="rangeClick(index)">{{item}}
  </li>
</ul>
<keep-alive>
  <home-content :data="storyList" :thatCode="rangeCode"></home-content>
</keep-alive>

Answer 1

// 父组件
computed: {
  rangeCode: {
    get () {
      return this.$store.state.rangeCode
    },
    set (val) { return val }
  }
},
methods: {
  rangeClick (idx) {
    this.$store.commit('setRangeCode', idx)
  }
}

// vuex
const store = new Vuex.Store({
  state: {
    rangeCode: 0
  },
  mutations: {
    setRangeCode (state, code) {
      state.rangeCode = code
    }
  }
})

export default store

// main.js
import store from '@/state/index' // 根据自己的路径引入
Vue.prototype.$store = store

使用vuex保存状态