vue.js 传值刷新保存

Vue.js 是一种流行的前端 JavaScript 框架，用于构建用户界面和单页应用程序。在 Vue.js 中，数据传递和状态管理是非常重要的概念。当提到“刷新保存”时，通常是指如何在页面刷新后保持应用程序的状态。

基础概念

在 Vue.js 中，数据可以通过 props 向下传递给子组件，或者通过事件向上传递给父组件。此外，Vue 提供了 Vuex 这样的状态管理库来管理全局状态。

类型

父子组件通信：通过 props 和事件进行。
跨组件通信：使用 Vuex 或者 provide/inject 机制。
持久化状态：使用本地存储（如 localStorage 或 sessionStorage）来保存状态。

应用场景

表单数据保存：用户在填写表单时，希望在刷新页面后数据不会丢失。
用户偏好设置：用户的个性化设置需要在不同会话间保持一致。
购物车状态：电商网站中的购物车状态需要在页面刷新后仍然保留。

遇到的问题及原因

当页面刷新时，所有的 JavaScript 状态都会丢失，因为浏览器会重新加载所有的脚本和资源。这意味着任何在内存中的数据都会被重置。

解决方法

为了在页面刷新后保存状态，可以使用浏览器的本地存储功能。以下是一些常见的解决方案：

使用 localStorage

// 保存数据到 localStorage
localStorage.setItem('myDataKey', JSON.stringify(this.myData));

// 从 localStorage 读取数据
const savedData = JSON.parse(localStorage.getItem('myDataKey'));

使用 sessionStorage

// 保存数据到 sessionStorage
sessionStorage.setItem('myDataKey', JSON.stringify(this.myData));

// 从 sessionStorage 读取数据
const savedData = JSON.parse(sessionStorage.getItem('myDataKey'));

结合 Vuex 和本地存储

如果你使用 Vuex 来管理状态，可以在每次状态变更时同步更新本地存储：

// 在 Vuex store 中
const store = new Vuex.Store({
state: {
myData: JSON.parse(localStorage.getItem('myDataKey')) || {}
},
mutations: {
updateMyData(state, payload) {
state.myData = payload;
localStorage.setItem('myDataKey', JSON.stringify(payload));
}
}
});

示例代码

以下是一个简单的 Vue 3 示例，展示了如何在组件中使用本地存储来保存和恢复数据：

<template>
<div>
<input v-model="message" placeholder="Type something...">
<p>{{ message }}</p>
</div>
</template>

<script>
import { ref, onMounted } from 'vue';

export default {
setup() {
const message = ref(localStorage.getItem('message') || '');

onMounted(() => {
window.addEventListener('beforeunload', () => {
localStorage.setItem('message', message.value);
});
});

return { message };
}
};
</script>

在这个例子中，我们使用了 Vue 3 的 Composition API 来定义响应式的数据和生命周期钩子。当组件挂载时，我们添加了一个事件监听器来在页面卸载前保存 message 的值到 localStorage。

通过这种方式，即使页面刷新，用户的输入也不会丢失。