Pinia无法实时读取SessionStorage值，需页面刷新才生效

问题场景 #

点击搜索结果的RouterLink跳转至详情页时，需在详情页获取选中项的值且该值不能出现在地址栏。现有实现是点击跳转时将值存入SessionStorage，再通过Pinia Store读取该值。但详情页通过Store获取的值返回null，页面刷新后才能正常获取；直接调用sessionStorage.getItem("stored_value")则能正常拿到最新值。

现有代码问题分析 #

1. Pinia Store初始化逻辑缺陷：Store的state仅在实例化时读取一次SessionStorage。单页应用（SPA）跳转时，Store实例不会重新创建，因此跳转后Store的value仍保持初始值（首次加载时SessionStorage中无值，即为null）。
2. SearchResult组件错误：
   • 未正确实例化Store：const my_store = useMyStore缺少调用，应为useMyStore()。
   • 仅更新SessionStorage，未同步更新Store的state：点击时只把值存到SessionStorage，但Store的value没有更新，导致跳转后Store仍保留旧值。
   • 变量引用错误：chosen_value.value = some_value.value中some_value未定义，实际应为props.some_value。

修复方案 #

核心思路是让Pinia Store主动管理值的更新与SessionStorage的同步，确保跳转后Store的state始终是最新值。

1. 优化Pinia Store #

添加action方法用于更新值并同步到SessionStorage，同时增加可选的刷新方法用于主动从SessionStorage读取最新值：

import { defineStore } from 'pinia'

export const useMyStore = defineStore('myStore', {
    state: () => ({
        value: sessionStorage.getItem("stored_value") || null
    }),
    actions: {
        // 更新值并同步到SessionStorage
        setStoredValue(newValue) {
            this.value = newValue;
            sessionStorage.setItem("stored_value", newValue);
        },
        // 主动从SessionStorage刷新值（可选）
        refreshFromSessionStorage() {
            this.value = sessionStorage.getItem("stored_value");
        }
    }
})

2. 修正SearchResult组件 #

正确实例化Store，点击时调用Store的action更新值，确保Store和SessionStorage同步：

<script setup>
import { RouterLink } from 'vue-router'
import { useMyStore } from '../stores/MyStore'

const props = defineProps({
    some_value: {
      type: String,
      required: true
    },
    title: {
      type: String,
      required: true
    }
})

// 正确实例化Store
const my_store = useMyStore()

function updateChosenValue() {
    // 调用Store的action更新值，自动同步到SessionStorage
    my_store.setStoredValue(props.some_value);
}
</script>
    
<template>
    <div class="result">
        <RouterLink @click="updateChosenValue" :to="{ name: 'detail' }">
            <h2 class="item">{{ title }}</h2>
        </RouterLink>
    </div>
</template>

3. 优化详情页代码 #

因为点击时已经通过Store的action更新了value，详情页直接读取Store的value即可。若担心极端情况（如跳转时Store还未完成更新），可主动调用刷新方法：

import { useMyStore } from '../stores/MyStore';
import { storeToRefs } from 'pinia'

const my_store = useMyStore()

// 可选：极端场景下主动刷新（一般无需调用）
// my_store.refreshFromSessionStorage();

// 使用storeToRefs保持响应式
const { value } = storeToRefs(my_store);
console.log('当前选中值:', value.value);

验证逻辑 #

• 点击搜索结果时，Store的value和SessionStorage会同时被更新。
• 跳转至详情页时，Store实例已持有最新值，无需刷新页面即可直接获取。
• 保持了代码一致性，所有值的读写都通过Pinia Store完成，避免直接操作SessionStorage的零散代码。

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