Vue3点击组件存入Prop对象到LocalStorage却得到空数组的问题

你的问题核心是**selectFaction函数返回的闭包没有被执行**，导致赋值到LocalStorage的逻辑根本没触发。

具体分析 #

看selectFaction.ts里的代码：

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

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

这个函数最后返回了一个箭头函数，但在FactionOption.vue的setFaction里，你只是调用了selectFaction(f)，并没有执行这个返回的函数。所以theFaction.value = [rawObject]这行代码从来没跑过，LocalStorage里自然还是初始的空数组。

而你控制台能看到rawObject是因为console.log(rawObject)在函数调用时就执行了，和返回的闭包无关。

两种修正方案 #

方案1：去掉返回的闭包，直接在函数内执行赋值 #

修改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)

    // 直接赋值，不再返回闭包
    theFaction.value = [rawObject];
}

这样调用selectFaction(f)时就会直接执行赋值逻辑，LocalStorage就能正确更新。

方案2：调用时执行返回的闭包函数 #

修改FactionOption.vue里的setFaction：

function setFaction(f) {
    // 执行selectFaction返回的函数
    selectFaction(f)();
}

这种方式保留闭包的写法，但需要手动执行返回的函数来触发赋值。

额外建议 #

既然你用了VueUse的useLocalStorage，它会自动响应式同步LocalStorage，所以只要正确修改theFaction.value，LocalStorage就会自动更新，不需要额外操作。

内容的提问来源于stack exchange，提问作者wUmpage