Vuex持久化文章筛选状态，如何仅返回时保留，跳转其他页面后重置？

1. 调整Vuex Store 基础结构 #

首先需要把全量文章列表存入Store作为重置的基准数据源，同时新增重置筛选状态的mutation：

// 替换为你实际的全量文章原始数组
const FULL_ARTICLES = [/* 全量文章数据 */]
const store = new Vuex.Store({
 state: {
   allArticles: FULL_ARTICLES, // 新增：存储全量文章，固定作为重置数据源
   filteredArticles: FULL_ARTICLES // 初始化默认展示全量
 },
 mutations: {
   setFilteredList (state, value) {
     state.filteredArticles = value
   },
   // 新增：重置筛选列表为全量文章
   resetFilteredList (state) {
     state.filteredArticles = state.allArticles
   }
 },
 plugins: [
   createPersistedState()
 ],
})

2. 列表页新增路由进入场景判断 #

在文章列表页的路由前置守卫beforeRouteEnter中判断进入页面的场景，只有符合「浏览器返回/前进」、「从详情页点击返回按钮进入」的场景才保留筛选状态，其他场景自动重置：

// 写在文章列表页的script逻辑中
beforeRouteEnter (to, from, next) {
  next(vm => {
    // 场景1：判断是否是浏览器返回/前进操作
    const isBackNav = window.performance?.getEntriesByType('navigation')[0]?.type === 'back_forward'
    // 场景2：判断上一个页面是否是文章详情页，替换为你实际的详情页路由规则，比如详情页路由都是/news/xxx开头
    const isFromDetail = from.path.startsWith('/news/')

    // 不属于以上两种场景的，直接重置筛选状态
    if (!isBackNav && !isFromDetail) {
      vm.$store.commit('resetFilteredList')
      // 同步重置你自定义的筛选分类标识
      vm.filteredCategory = ''
    }
  })
}

可选优化：自定义返回按钮场景兼容 #

如果你的「返回文章列表」是详情页的自定义按钮，可以在跳转时加临时标识，避免误判：

// 详情页返回按钮的点击逻辑
goBackToList () {
  this.$router.push({
    path: '/news', // 替换为你列表页的路由
    query: { isBack: 1 }
  })
}

同时调整列表页的守卫逻辑，兼容这个自定义标识：

beforeRouteEnter (to, from, next) {
  next(vm => {
    const isBackNav = window.performance?.getEntriesByType('navigation')[0]?.type === 'back_forward'
    const isFromDetail = from.path.startsWith('/news/')
    const isCustomBack = to.query.isBack === '1'

    if (!isBackNav && !isFromDetail && !isCustomBack) {
      vm.$store.commit('resetFilteredList')
      vm.filteredCategory = ''
      // 可选：清除url上的临时标识，避免刷新误判
      if (to.query.isBack) {
        vm.$router.replace({ query: { ...to.query, isBack: undefined } })
      }
    }
  })
}

可选优化：筛选逻辑简化 #

你原有筛选逻辑里先提交全量列表再过滤的操作可以省略，直接用全量文章数据源过滤即可，减少不必要的状态更新：

ideas: function ideas() {
  const ideasFiltered = this.$store.state.allArticles.filter(post => post.category === 'Ideas')
  this.filteredCategory = 'ideas'
  this.$store.commit('setFilteredList', ideasFiltered)
}

内容的提问来源于stack exchange，提问作者bailboo