刷新后值消失答案

【问题标题】：Values disappearing after refresh刷新后值消失
【发布时间】：2021-07-22 02:54:18
【问题描述】：

登录后，我设置了 username 和 loggedIn 值，我将这些值导入到我的组件中，它可以工作，但是在刷新页面后它又回到了原始值，为什么会这样？

我在 vue 2 中使用 vuex 时没有这个问题。我真的必须将这些数据存储在 localStorage 中吗？呵呵。

const loggedIn = ref(false);
const userName = ref('');

export default function useAuth() {

 const login = async ({ email, password }) => {
    try {
      const result = await AuthService.login({ email: email, password: password });
      userName.value = result.data.nick;
      loggedIn.value = true;
    }
   }
return {login, loggedIn, userName}
}

【问题讨论】：

是的，如果你使用localStorage 来做类似的事情会有所帮助。如果您不想将用户数据存储在localStorage 中，则必须在每次刷新页面时要求他们登录。此外，使用数据放置loggedIn 和userName 会好很多。
嘿嘿，刷新页面时，时间状态总是Clear。你需要使用Session Storage/Local Storage。
另外，您缺少catch 或finally 表达式。至少需要其中之一。代码无效。
您无法在 vue 2 中以原生方式实现这一点，您可能正在使用诸如 vuex-persist 之类的库。 vuex 状态总是在页面刷新时清除。刷新页面后保持状态的唯一方法是使用 localStorage 或 sessionStorage（当浏览器关闭时会被删除）

标签： vue.js vuejs3

【解决方案1】：

浏览器不会自动存储 JavaScript 应用程序的当前内存。在页面刷新时，会重新呈现整个页面并加载新的“应用程序”。当您将状态存储在后端站点时（通过 API 将相关数据推送到后端并将其存储在那里，例如在数据库中），您可以影响此行为，或者您可以将状态存储在浏览器的存储中。这可以作为 cookie、会话/本地存储和 IndexedDB。根据您的需要，您可以在页面加载时从后端或本地存储的数据中检索相关状态。如果您使用的是 Vuex，有一些插件可以让您自动执行此操作。您仍然可以将 Vuex 与 Vue3 一起使用（使用 useStore() 而不是 this.$store）。

如果您仅使用普通组合 API，则不会保存内存中的变量。但是，您可以轻松地观察变量并自行将值设置到本地存储。参见例如this example 使用本地存储中的值（在页面加载时）创建一个新变量，定义一个观察者，该值将被设置为存储，然后最终从该模块返回变量。

【讨论】：

当我获取数据并将其存储在数组中时，每当我更改选项卡的加载时，我也面临这个问题，但是每当我刷新页面时它消失，为什么会发生这种情况？我也试过onMounted，onBeforeMount ..
您正在将 API 中的数据加载到内存中 JavaScript 数组中，该数组仅在页面刷新之前可用。刷新完全擦除内存。这就是浏览器的工作方式。如果您另外将其存储在本地存储或本地某处，然后在页面加载时再次从那里加载它，您只能规避这一点。或者您每次都从 API 中获取它。通常，您总是从 API 获取大部分数据，并且只在本地存储一些首选项（例如所选语言或身份验证令牌，通常在 cookie 中）。