vue.js - VueJS 使用路由器链接更改查询，但在其上保留某种缓存并复制结果

Question

我有一个页面，我可以单击路由器链接来过滤页面上的结果，就像这样（使用 PUG 作为模板）

.list
                ul.list
                  li.list__item
                    router-link.list__item-link(
                      :to="getLocation('draftStatus')")
                      .list__item-val {{ summary.draftStatus }}
                        .list__item-percentage {{ summary.draftStatusPercentage }}%
                      .list__item-description Draft
                  li.list__item
                    router-link.list__item-link(
                      :to="getLocation('rcaStatus')")
                      .list__item-val {{ summary.rcaStatus }}
                        .list__item-percentage {{ summary.rcaStatusPercentage }}%
                      .list__item-description RCA

和功能：

getFilterOption(
      selectedOption: string,
      query: Dictionary<string | (string | null)[]>,
    ): Record<string, string> {
      const filterOption = queryFilterOptions[selectedOption];

      if (selectedOption.includes('Status') && query.problemStatus !== undefined) {
        const selectedProblemStatus = filterOption.problemStatus;

        if (
          !query.problemStatus.includes(selectedProblemStatus) &&
          selectedProblemStatus !== undefined
        ) {
          console.log('query.problemStatus', query.problemStatus);
          filterOption.problemStatus = `${query.problemStatus},${selectedProblemStatus}`;
          filterOption.problemStatus = this.removeDuplicates(filterOption.problemStatus);
        }
      }

      return filterOption;
    }

    responsibilityLocation(selectedOption: string): Location {
      const { query } = this.$route;

      const filterOption = this.getFilterOption(selectedOption, query);

      return {
        name: 'summary',
        query: { ...query, ...filterOption },
      };
    }

和 queryFilterOptions 就像：

export const queryFilterOptions: Record<string, Record<string, string>> = {
  draftStatus: {
    problemStatus: responsibilityProblemStatuses.DRAFT,
  },
  rcaStatus: {
    problemStatus: responsibilityProblemStatuses.RCA,
  },

好的，但这是我的问题：

1. 我点击“草稿”，好的。它按问题状态过滤：草稿

2. 我点击“RCA”，好的。它按问题状态过滤：草稿，rca 到目前为止，很好但是现在，我将删除此过滤器，单击它的标签，这将触发此功能：

   removeFromQuery(typeOfFilter: string, filterValue: string): void { const { query } = this.$route; const newQuery = Object.assign({}, query);

     if (query[typeOfFilter] !== undefined) {
       if (!query[typeOfFilter].includes(',')) {
         delete newQuery[typeOfFilter];
       } else {
         const filterArray = (query[typeOfFilter] as string).split(',');
         newQuery[typeOfFilter] = filterArray.filter((filter) => filter !== filterValue).join(',');
       }
     }
   
     if (JSON.stringify(this.$route.query) !== JSON.stringify(newQuery)) {
       this.$router.push({
         name: 'responsibility',
         query: newQuery,
       });
     }
   }
   

好的，所以，两个过滤器都从查询中删除，一切正常。然后我再次单击任何过滤器，让我们说“草稿”，然后，query.problemStatus 又是“草稿，rca”！

它似乎以某种方式缓存，但我找不到如何解决这个问题。

标签： vue.jsvue-router