vue3组合式存入session

要将Vue3组合式存入Session，你可以使用Vue3的内置函数`toRefs`将响应式对象转换为普通对象，然后再使用`JSON.stringify`将其转换为JSON字符串。接下来，你可以使用`sessionStorage.setItem`将JSON字符串存储在Session Storage中。

以下是一个示例代码：

import { reactive, toRefs } from 'vue';

// 创建响应式对象
const state = reactive({
  name: 'John',
  age: 25,
});

// 将响应式对象转换为普通对象
const plainState = toRefs(state);

// 将普通对象转换为JSON字符串并存储在Session Storage中
sessionStorage.setItem('myState', JSON.stringify(plainState));

当你需要检索存储在Session Storage中的Vue3组合式状态时，可以使用`JSON.parse`将存储的JSON字符串转换为JavaScript对象，并使用`reactive`函数将其转换为响应式对象。

以下是一个示例代码：

import { reactive } from 'vue';

// 从Session Storage中检索JSON字符串并转换为JavaScript对象
const sessionState = JSON.parse(sessionStorage.getItem('myState'));

// 将JavaScript对象转换为响应式对象
const state = reactive(sessionState);

// 访问响应式对象的属性
console.log(state.name); // 'John'
console.log(state.age); // 25

需要注意的是，当您将Vue3组合式存储在Session Storage中时，您需要确保存储的对象不包含任何函数或循环引用，否则会导致JSON.stringify()失败。