当我从 vuejs 中的另一个路由组件进入同一路由组件时，如何保存状态？

Question

我有一个索赔下拉列表和调用下拉值更改的函数是这样的：

changeDdVal(v) {
  this.$store.dispatch('getUserRoles').then(userRoles => {
    if (userRoles.admin) {
      this.selectedYear = new Date().getFullYear();
      switch (v) {
        case 1:
          this.dropValue = "salesClaimCount";
          this.headerDropdownClaim = "sales";
          this.tableHeadData = this.salesTableHeadData;
          this.api.filterData = "getSalesClaimFilterDataForApprover";
          this.$router.push({name: this.routeName, params: {approverClaimType: this.claimTableData.claimStatus, dropType: this.headerDropdownClaim, userRole: this.role}})
            .catch(() => {});
          this.yearChange(this.selectedYear);
          break;
        case 2:
          this.dropValue = "staffingClaimCount";
          this.headerDropdownClaim = "staffing";
          this.tableHeadData = this.placementTableHeadData;
          this.api.filterData = "getStaffingClaimFilterDataForApprover";
          this.$router.push({name: this.routeName, params: {approverClaimType: this.claimTableData.claimStatus, dropType: this.headerDropdownClaim, userRole: this.role}})
            .catch(() => {});
          this.yearChange(this.selectedYear);
          break;
        }
      }
    })
  }

而今年的 yearChange 函数负责使用所选年份调用 api 并相应地显示数据。 我在创建状态上调用这个 changeDdVal 函数。 当显示数据时，如果我单击任何数据，我将转到该特定记录的详细视图。

现在的问题是当我将年份从当前年份更改为任何其他年份并单击该特定年份数据并使用“$router.go（-1）”返回仪表板时，我的状态重置即年份再次更改为当前但是我想留在选定的年份。 我知道这是因为“this.selectedYear = new Date().getFullYear();” 我可以使用 vuex 来存储状态而不是这个。 但就我而言，如果我来自所选年份该记录的详细视图，我想重置掉落更改时的状态并保存状态。

例如，默认情况下年份是 2022 年，我将其更改为 2021 年，显示 2021 年的数据，我单击 2021 年的任何记录并使用 $router.go(-1) 我应该在 2021 年。如果我已选择 2021 年并将降幅从销售额更改为安置年份应重置为 2022 年。

这是我的年份变化功能

       yearChange() {
            this.axiosCancelToken.cancel("cancel requested")
            this.changeYear = false;
            this.firstLoad = true;
            this.sortBy =  "claimId";
            this.sortType = "descending";
            this.handlePagination(this.paginationOptions);
            this.mavePaginationList(false);
            this.fetchData();
            var dataApi = new FormData();
            dataApi.append("year", this.selectedYear);
            api
                .post(this.api.filterData, {data: dataApi})
                .then((res) => {
                    //resposne
           })
        },

Answer 1

根据你的问题-

1. 您需要在更改路由时保存一些值，并根据 API 请求刷新一些值。 （ keep-alive在那个用例中不会做太多。）
2. 需要保留的值是表单变量（选择下拉列表）或一些手动变量（页码）。

正如你所说，由于某些问题你不能使用Vuex ，我的猜测是，Vuex 和vuex-map-fields一起应该可以缓解你的问题的过程。

vuex-map-fields是为保存在 Vuex 存储中的字段启用双向数据绑定的好方法。

如果我以你的问题为例-
假设在你的Home.vue你改变了下拉值，并且在它的变化中，一个 API 请求被触发并带来一些你在你的组件上显示的数据，你可以选择任何将导致新路线的数据，比方说About.vue并且当您返回Home.vue时，您选择的年份应该会保留。

所以，你可以这样做 -

1. 安装vuex-map-fields并正确配置它。
2. 在名称为“ selectedYear ”的 Vuex 状态中创建一个属性，如下所示 -

import Vuex from "vuex";
// Import the `getField` getter and the `updateField`
// mutation function from the `vuex-map-fields` module.
import { getField, updateField } from "vuex-map-fields";

Vue.use(Vuex);
const store = new Vuex.Store({
  state: {
    selectedYear: null
  },
  getters: {
    // Add the `getField` getter to the
    // `getters` of your Vuex store instance.
    getField
  },
  mutations: {
    // Add the `updateField` mutation to the
    // `mutations` of your Vuex store instance.
    updateField
  }
});

3. 在您的 Vue 模板中，使用此 Vuex 状态属性来获取和更改selectedYear 。

<select v-model="selectedYear" @change="callAPI()">
    <option>2020</option>
    <option>2021</option>
    <option>2022</option>
</select>

import { mapFields } from "vuex-map-fields";

export default {
  name: "Home",

  computed: {
    // The `mapFields` function takes an array of
    // field names and generates corresponding
    // computed properties with getter and setter
    // functions for accessing the Vuex store.
    ...mapFields(["selectedYear"]),
  },
}

当你想重置下拉状态时，只需这样做 -

this.selectedYear = null;

它也会在 Vuex 状态下更新。

这样，您应该注意到，当您切换路由时，选中的框状态将持续存在，因为它与商店绑定。
以同样的方式，您可以保留分页状态和您想要的另一个变量。 使用vuex-map-field的好处是你不需要手动编写 getter 和 setter 函数来联系状态。

注意 -如果您还想在页面重新加载之间保留 Vue 状态，请将 vuex-persistedstate与 Vuex 一起使用。

由于您的代码取决于多个概念，我无法在此处提供代码片段，但我创建了一个小提琴并尝试重现该问题，您可以查看它并根据您的情况进行修改并确保一切正常。

在小提琴中，我使用了你问题中提到的相同问题（但数据和 API 请求是虚拟的），你应该看到当你更改路线时（从Home.vue到About.vue ），年份会持续但是当重新加载页面不会，因为我没有使用vuex-persistedstate 。

这是- https://codesandbox.io/s/vue-router-forked-mdvdhd?file=/src/views/Home.vue:935-1181