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

oyjwcjzk 于 2022-12-19 发布在 Vue.js

关注(0)|答案(1)|浏览(113)

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

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和所选年份，并相应地显示数据。我在created状态下调用这个changeDdVal函数。当数据显示时，如果我单击任何数据，我将转到该特定记录的详细视图。
现在的问题是，当我将年份从当前年份更改为任何其他年份，并单击该特定年份的数据，然后使用“$router.go（-1）"返回 Jmeter 板时，我的状态会重置，即年份再次更改为当前年份，但我希望保留在选定的年份。我知道这是因为“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
           })
        },

vue.js

来源：https://stackoverflow.com/questions/74832172/how-can-i-keep-the-state-saved-when-i-coming-to-same-route-component-from-anothe

1条答案

按热度按时间

4xrmg8kj1#

根据你的问题-
1.您需要在更改路由时保存一些值，并根据API请求刷新一些值。（keep-alive在该用例中没有太大作用。）
1.需要保存的值是表单变量（选择下拉菜单）或一些手动变量（分页号）。
正如你所说，你不能使用Vuex，因为一些问题，我的猜测是，Vuex和vuex-map-field一起应该减轻你的问题的过程。

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

如果我以你的问题为例-
假设您在Home.vue上更改了下拉列表的值，在更改时，会触发一个API请求，并将一些数据显示在组件上，您可以选择任何将导致新路线的数据，比如About.vue，当您返回Home.vue时，您选择的年份应该保持不变。
所以，你可以这样做-
1.安装并正确配置vuex-map-fields。
1.在您的Vuex名称状态中创建一个属性"selectedYear"，如下所示-

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
  }
});

1.在Vue模板中，使用此Vuex state属性获取并修改selectedYear。
x一个一个一个一个x一个一个二个x
当您想要重设下拉式清单状态时，只要执行下列动作即可-

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

赞(0）回复(0）举报 2022-12-19

我来回答

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

1条答案

相关问题

热门标签

最新问答