Pinia Store设置值后属性返回空对象的问题排查

场景说明 #

在accountsList.vue中调用脚本（已注释部分代码隔离问题），props传入的balance已确认有有效值，但遇到两个问题：

1. Store中console.log(balance)返回空对象，尝试赋值后仍为null；
2. 调用接口时Ziggy报错缺少'id'参数，但硬编码id值后可正常运行。

相关代码 #

accountsList.vue #

<script setup>
import Account from "@/Pages/Partials/AccountItem.vue";
import {UseAccountsStore} from "@/Stores/UseAccountsStore.js"

const props = defineProps({
    editMode: Boolean,
    balance: Object
})

const accountsStore = UseAccountsStore();
// console.log(props.balance)
accountsStore.balance = props.balance;
accountsStore.getAccounts()

// const balanceStore = UseBalanceStore()
// const balanceItemsStore = UseCategoryItemsStore()

function update() {
    // accountsStore.getTotal()
    // balanceStore.getGrandTotal()
}
</script>

UseAccountsStore.js #

import {defineStore} from "pinia";
import {ref} from "vue";

export const UseAccountsStore = defineStore('AccountStore', () => {
    const balance = ref(null)
    const accounts = ref([])
    const total = ref(0)

    function getAccounts() {
        console.log(balance);
        axios.get(route('accounts.index', {'id': balance.value.id}))
            .then((response) => accounts.value = response.data)
    }

    function getTotal() {
        axios.get(route('accounts.total'))
            .then((response) => total.value = response.data)
    }

    function addAccount(account) {
        accounts.value.push(account)
    }

    return {accounts, total, getAccounts, getTotal, addAccount}
})

问题原因及解决方案 #

1. balance值无法正确赋值的原因 #

你的Pinia Store中没有把balance变量暴露出去，在return语句里只返回了accounts、total和几个方法，外部无法直接通过accountsStore.balance访问或赋值这个ref变量。另外，就算暴露了，直接赋值给ref变量本身也不符合Vue响应式的规则，应该操作其.value属性。

修复步骤：

• 方式一：修改Store的return语句，添加balance让外部可以直接访问：

return {accounts, total, balance, getAccounts, getTotal, addAccount}

对应在accountsList.vue中保持赋值逻辑不变：accountsStore.balance = props.balance;（Pinia会自动处理ref的.value，无需手动操作）

• 方式二（更规范）：在Store中新增设置balance的方法，避免外部直接操作ref：

function setBalance(newBalance) {
    balance.value = newBalance;
}
// 同时在return里加上这个方法
return {accounts, total, getAccounts, getTotal, addAccount, setBalance}

对应在accountsList.vue中修改为：accountsStore.setBalance(props.balance);

2. Ziggy路由参数报错的原因 #

这个问题是第一个问题的连锁反应：因为balance没有被正确赋值，balance.value还是null，访问balance.value.id会得到undefined，导致Ziggy生成路由时缺少必填的'id'参数。

修复步骤：

• 先解决第一个问题，确保balance被正确赋值；
• 同时在getAccounts方法中增加空值判断，避免空指针错误：

function getAccounts() {
    if (!balance.value) {
        console.warn('balance未赋值，无法获取账户列表');
        return;
    }
    console.log(balance.value); // 这里应该能输出正确的balance对象了
    axios.get(route('accounts.index', {'id': balance.value.id}))
        .then((response) => accounts.value = response.data)
}

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