vue状态缓存问题

这是写的一个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>


阅读 1.6k
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保存状态

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题