Javascript 在离开页面时提交要存储的初始数组，但若按“上一步”按钮将加载最后提交的数组

我有一系列的文章，可以根据它们的类别进行过滤。如果单击“创意”过滤器，它将把数组过滤成一个新数组，比如说“创意已过滤”，然后我将其提交到我的商店“filteredArticles”。如果我离开页面并按back，它将保存该信息。耶！伟大的但是，假设我转到我网站中的一个新页面，然后再次单击我的新闻页面，它仍然保存了上次提交的“ideasfilter”。如果您在浏览器中按“后退”键或在我的文章中按“返回文章”键（我有一个按钮可以让您返回每个文章页面上的文章列表），是否有办法只保存该数据，但如果您单击我网站中的其他链接，它将重置为我的完整文章列表

这是我的商店：

const store = new Vuex.Store({
 state: {
   filteredArticles: this.articles
 },
 mutations: {
   setFilteredList (state, value) {
     state.filteredArticles = value
   }
 },
 plugins: [
   createPersistedState()
 ],
})

我的计算：

computed: {
  filteredArticles () {
     return store.state.filteredArticles
  }
}

所以，如果你点击我的一个过滤后的是运行一个脚本，这里是一个想法脚本的例子

ideas: function ideas() {
  this.$store.commit('setFilteredList', articles) **// resetting to the full list before filtering**

  var ideasFiltered = this.filteredArticles.filter(function(post) {
     return post.category === 'Ideas';
  });

  this.filteredCategory = 'ideas'; **// this is used to add the category to my url**

  this.$store.commit('setFilteredList', ideasFiltered) **// committing to the store**
}

这是我的html，不确定是否真的需要

<div class="news-article-list">
  <ul>
     <li v-for="(article, index) in filteredArticles" :key="index">
       <a :href="article.url">
         <img :src="article.featureImg" v-if="article.featureImg" alt="Article Feature Image" />
         <h2 class="news-title">{{ article.title }}</h2>
         <p class="news-date">{{ article.date }}</p>
         <p class="short-desc">{{ article.shortDesc }}...</p>
       </a>
       <router-link class="read-more" :to="article.url">Read More</router-link>
     </li>
  </ul>
</div>

阅读更多

如果我需要进一步解释，请告诉我。我需要它来提交所有文章，如果你转到我网站上的另一个页面并单击“新闻”返回到新闻页面，但是如果你转到一篇文章并单击“上一步”，则保存过滤后的文章列表

---

提前谢谢

我不会担心检测“后退”按钮。您想知道的是用户从哪里来，以及用户想去哪里<代码>至和

自

是您的路线

ideasFiltered

将永久更改，直到您手动清除它。要自行清除，请在

vue路由器

中创建一个

操作

，重置

ideasFiltered

中的数据，然后

根据用户所处的路由调度该操作。您可以在Vue组件中添加一个
监视
，以监视全局Vue路由器
$router
。在Vue.js 3中，它是这样的：

import {useRoute} from 'vue-router';
import {useStore} from 'vuex';
....

setup() {
const $route = useRoute();
const $store = useStore();
  watch(() => $route.name, async () => {
// If the user is not on News or Articles route, then tell store to reset filtered list
    if ($route.name !=== "News" || $route.name !=== "Articles") {
      $store.dispatch('clearFilteredList', null) // You need to create this action in your store
    },
    {
      deep: true,
      immediate: true
    }
)
}

要提交的
$store
中的
突变
和
操作
类似于：

mutations: {
   setFilteredList (state, value) { // value passed should be null
     state.filteredArticles = value
   }
actions: {
    clearFilteredList({commit}, payload) { // This is null from Vue component remember!
    commit('setFilteredList', payload) // sets it to null
}

我看不到你的完整商店代码，所以上面的答案是最好的猜测，但应该给你一个想法如何去做。您不必使用
null
，您可以使用将其设置为空数组或对象，例如
[]
您使用的是哪个版本的Vue.js？我建议您在路线上添加一块手表，然后根据您选择的路线。您可以决定如何操纵您的商店。v2.6.13我将如何操作？我知道我的路由器正在寻找参数，以查看我选择的类别和我所在的页面。这是相同的前提吗？以下是我在currentPage和filteredCategory中使用的内容-currentPage:this.$route.params.currentPage | | 1，filteredCategory:this.$route.params.filteredCategory | | |'all-categories'要添加，我只在我的文章列表页面上使用vuejs。如果我的其他页面不使用vue，这是否仍然有效？如果单击“上一步”按钮，请查看此答案以检测。如果需要使用过滤数据或常规数据，可以使用此选项将I prop发送到组件。但是，我没有组件。我只在这一页上使用vue。那么这仍然有效吗？