我试图通过一个 prop （派系）从一个组件（派系选项）上的@click事件的选项。

FactionOption.vue

<script setup>
import { selectFaction } from '../../composables/selectFaction';

defineProps({
    faction: {
        type: Object,
        required: true
    }
})

function setFaction(f) {
    selectFaction(f)
}

</script>

<template>
    <div class="option">
        <p class="option__text">{{ faction.name }} - {{ faction.title }}</p>
        <button class="button button--link" key="select" @click="setFaction(faction)">Select</button>
    </div>
</template>

字符串
上面的代码将Object传递给selectedFaction.ts：

selectFaction.ts

import { toRaw } from "vue";
import { selectedFaction } from "./useFactions";

export function selectFaction(faction) {
    const theFaction = selectedFaction();
    const rawObject = toRaw(faction);
    console.log(rawObject)
    console.log(theFaction.value)

    return () => {
        theFaction.value = [rawObject];
    };
}

型
控制台准确地将对象转换为来自代理的原始值。

useFactions.ts

import { Faction } from "../models/Faction";
import { createGlobalState, useLocalStorage } from "@vueuse/core";

export const selectedFaction = createGlobalState(() => {
    return useLocalStorage<Faction[]>("@battleline/selectedFaction", []);
});

型
但是，当单击该按钮时，会向LocalStorage中插入一个空数组，用于“@battleline/selectedFaction”。
我是Vue 3的新手，为什么返回一个空数组？TYIA