用cookie实现vue3+vite+elementplus刷新页面，数据保留

在Vue 3 + Vite + Element Plus中，要实现页面刷新时保留数据，可以借助浏览器的Cookie来存储数据。下面是一个简单的实现步骤：

1. 安装cookie库：在项目中使用`npm`或`yarn`安装`js-cookie`库。

   npm install js-cookie
   或
   yarn add js-cookie

2. 创建一个`utils`文件夹，然后在该文件夹下创建一个名为`cookie.js`的文件。

3. 在`cookie.js`文件中，引入`js-cookie`库，并创建以下两个方法：

   import Cookies from 'js-cookie';

   // 存储数据到Cookie
   export function setCookie(key, value) {
     Cookies.set(key, value);
   }

   // 从Cookie中读取数据
   export function getCookie(key) {
     return Cookies.get(key);
   }

4. 在需要保留数据的组件中，例如`Home.vue`，使用`setCookie`方法将数据存储到Cookie中。

   import { setCookie } from '@/utils/cookie';

   export default {
     mounted() {
       // 假设要保存的数据是一个对象
       const data = { name: 'John', age: 25 };

       // 存储数据到Cookie
       setCookie('data', JSON.stringify(data));
     },
   };

5. 在需要恢复数据的组件中，例如`Profile.vue`，使用`getCookie`方法从Cookie中读取数据。

   import { getCookie } from '@/utils/cookie';

   export default {
     data() {
       return {
         data: null,
       };
     },
     mounted() {
       // 从Cookie中读取数据
       const cookieData = getCookie('data');

       if (cookieData) {
         this.data = JSON.parse(cookieData);
       }
     },
   };

通过上述步骤，你可以在刷新页面后仍然保留数据。当需要存储数据时，使用`setCookie`方法将数据存储到Cookie中；当需要恢复数据时，使用`getCookie`方法从Cookie中读取数据。请注意，Cookie的大小是有限制的，如果存储的数据量较大，可能会超过Cookie的大小限制。