vue3存入session

在Vue3中，我们可以使用`sessionStorage`来存储会话数据。`sessionStorage`是一种浏览器提供的存储机制，可以将数据保存在浏览器的会话期间。当用户关闭浏览器窗口或标签页时，数据会被清除。

下面是一个将数据存储到`sessionStorage`中的示例：

// 在组件中存储数据到sessionStorage
sessionStorage.setItem('key', 'value');

// 在组件中获取sessionStorage中的数据
const value = sessionStorage.getItem('key');

在这个示例中，我们使用`setItem`方法将键值对存储到`sessionStorage`中，使用`getItem`方法从`sessionStorage`中获取数据。

如果需要在Vue应用程序的多个组件中访问会话数据，我们可以使用Vue插件或mixin将`sessionStorage`封装成Vue实例的属性或方法。下面是一个使用Vue插件封装`sessionStorage`的示例：

// SessionStoragePlugin.js
export default {
  install(app) {
    app.config.globalProperties.$sessionStorage = {
      getItem(key) {
        return sessionStorage.getItem(key);
      },
      setItem(key, value) {
        sessionStorage.setItem(key, value);
      },
      removeItem(key) {
        sessionStorage.removeItem(key);
      }
    };
  }
};

在这个示例中，我们定义了一个Vue插件`SessionStoragePlugin`，该插件将`sessionStorage`封装成Vue实例的属性`$sessionStorage`，该属性包含`getItem`、`setItem`和`removeItem`三个方法，用于获取、设置和删除会话数据。

我们可以在Vue应用程序的入口文件中使用该插件：

// main.js
import { createApp } from 'vue';
import App from './App.vue';
import SessionStoragePlugin from './SessionStoragePlugin.js';

const app = createApp(App);
app.use(SessionStoragePlugin);
app.mount('#app');

在这个示例中，我们在Vue应用程序的入口文件中使用`use`方法安装`SessionStoragePlugin`插件。安装插件后，我们就可以在Vue组件中使用`$sessionStorage`属性来访问会话数据了：

// 在组件中使用$sessionStorage
export default {
  created() {
    this.$sessionStorage.setItem('key', 'value');
  },
  methods: {
    getValue() {
      return this.$sessionStorage.getItem('key');
    }
  }
};

在这个示例中，我们在Vue组件中使用`$sessionStorage`属性的`setItem`方法将数据存储到`sessionStorage`中，使用`getItem`方法从`sessionStorage`中获取数据。