如何在Vuejs中刷新页面也能保持localstorge中的数组值？

HelloWorld.vue

<template>
  <div>
    <div v-for="item in items" :key="item.cakeid">
      <b> id: {{ item.cakeid }}</b>
      <router-link
        :to="{
          name: 'UserWithID',
          params: { id: item.cakeid },
          query: { cakeid: item.cakeid },
        }"
      >
        {{ item.cakeName }}
      </router-link>
    </div>
    <br /><br /><br />
    <User />
    <br /><br /><br />
    <tabs />
  </div>
</template>

<script>
import User from "./User.vue";
import tabs from "./tabs.vue";
import { router } from "./router";
export default {
  name: "HelloWorld",
  components: {
    User,
    tabs,
  },
  data() {
    return {
      items: router,
    };
  },
};
</script>

User.vue

<template>
  <div>
    <div v-for="(item, key) in user" :key="key">
      {{ item.cakeName }} <br />
      {{ user.total }}{{ item.cakePrice }} <br />
      {{ user.total }}{{ item.total }}
    </div>
  </div>
</template>

<script>
import { routerid } from "./routerid";
export default {
  name: "User",
  data() {
    return {
      lists: routerid,
    };
  },
  computed: {
    user: function () {
      return this.lists.filter((item) => {
        if (item.cakeid === this.$route.params.id) {
          return item;
        }
      });
    },
  },
};
</script>

tab.vue

<template>
  <div>
    <div v-for="(item, key) in user" :key="key">
      {{ item.chefname }} <br />
      {{ user.feedback }}{{ item.rating }} <br />
    </div>
  </div>
</template>

<script>
import { tabsandcontent } from "./tabsandcontent";
export default {
  name: "User",
  data() {
    return {
      lists: tabsandcontent,
    };
  },
  computed: {
    user: function () {
      return this.lists.filter((item) => {
        if (item.cakeid === this.$route.params.id) {
          return item;
        }
      });
    },
  },
};
</script>

如何在Vuejs中刷新页面后仍保持数据活动？

在单击routerlink时，我根据每个数组ID过滤一些值。并显示这些数组值。

在此过程中，单击路由器链接显示数组值后，如果刷新页面，则不会显示之前显示的所有数组值。

我想保留数据，即使在刷新页面之后也是如此(就像之前单击的状态一样)。我认为这可以通过使用localstorage get和set项来处理。

但不确定将其放置在哪里。？

---

解决方案

问题是，当您刷新页面时，User.vue中的这部分this.$route.params.id以字符串形式返回id，并且您使用三个相等的符号检查item.cakeid === this.$route.params.id。 因此，这意味着您不仅要求这些值相等，而且要求它们属于同一类型。

只需将其更改为==或使用parseInt函数从字符串解析整数即可。