即使在 Vuejs 中刷新页面，如何保持更新的数组保持不变？

Question

HelloWorld.vue

<template>
  <div>
    <b>Vuejs dynamic routing</b>
    <div v-for="item in items" :key="item.id">
      <b>{{ item.id }}.</b> &nbsp;&nbsp;&nbsp;
      <router-link :to="{ name: 'UserWithID', params: { id: item.id, item } }">
        {{ item.val }}{{ item.kk }}
      </router-link>
    </div>
    <br /><br /><br />
  </div>
</template>
 
<script>
import { data } from "../data";
export default {
  name: "HelloWorld",
  data() {
    return {
      items: data,
    };
  },
};
</script>

User.vue

<template>
  <div>
    <form>
      <label>Val:</label><br />
      <input type="text" id="val" name="val" v-model="val" /><br />
      <label>kk:</label><br />
      <input type="text" id="kk" name="kk" v-model="kk" /><br /><br />
      <button @click="updateData">submit</button>
    </form>
  </div>
</template>

<script>
import { data } from "../data";
export default {
  name: "User",
  props: {
    item: {
      required: true,
      type: Object,
    },
  },
  data: function () {
    return {
      val: this.item.val,
      kk: this.item.kk,
    };
  },
  methods: {
    updateData() {
      const id = this.$route.params.id;
      let newData = data.find((value) => value.id === id);
      newData.kk = this.kk;
      newData.val = this.val;
      this.$router.push({ path: "/" });
    },
  },
};
</script>

main.js

import Vue from "vue";
import App from "./App.vue";
import VueRouter from "vue-router";
import HelloWorld from "./components/HelloWorld.vue";
import User from "./components/User.vue";

Vue.use(VueRouter);

const router = new VueRouter({
  routes: [
    { path: "/", name: "User", component: HelloWorld, props:true },
    { path: "/User/:id", name: "UserWithID", component: User, props:true }
  ]
});

Vue.config.productionTip = false;

new Vue({
  router,
  render: (h) => h(App)
}).$mount("#app");

这是我完整的工作代码：- https://codesandbox.io/s/vibrant-dhawan-3id77?file=/src/main.js

如果你请通过我上面的代码一次，最初我有一些 router-link 和 router-link 的 onclick，我能够重定向到 User.vue 组件。将预先填充一些详细信息，我可以编辑这些详细信息并单击提交按钮以更新数组。

成功更新阵列后，问题就来了，如果我只是点击刷新按钮。甚至更新后的数组也被重置并设置为默认值

我不确定，如何保持更新的数组（保持相同的值）即使页面也被刷新。我是否需要使用任何 vuex 或在 localstorage 中管理更新的数组值或实时场景如何发生？

Answer 1

每次刷新您的应用程序时 re-rendered 并且在 HelloWorld.vue 中您从本地文件获取数据，这就是为什么您每次都获得相同的数组。

要在刷新后呈现更新后的数组，您需要将数据存储在 localStorage 或 sessionStorage 中，如果数据存在，则获取该数据，如果不使用本地文件中的数据。

状态不会在刷新时被记住，这就是为什么你需要将它存储在某个地方。

如果您打算使用 vuex，您可以在使用 vuex-persistedstate 刷新后保存数据。更多信息：

即使在 Vuejs 中刷新页面，如何保持更新的数组保持不变？

How to keep updated array stay same even if page is refreshed in Vuejs?

javascript

vue.js

vuex