假设我构建了一个应用程序，每次加载或刷新时都通过axios.get从数据库中获取数据。这使得应用程序变慢，所以我想只获取应用程序initial load中的数据并将其放入sessionStorage中。
问题是sessionStorage没有React。当我这样做时：

const state = reactive({
    image: sessionStorage.image
})

并希望渲染：

<div class="home-image" :style="{'background-image': 'url(' + state.image + ')'}"></div>

它只在sessionStorage在前一个页面加载中被更新时才起作用。对于初始页面加载，state.image抛出404 not found。
有什么方法可以让sessionStorageReact？我读过watchers，set和get，但不能完全弄清楚。

解决方案（新增）：

实际上，我刚刚找到了一种方法，使sessionStorage在initial load期间的行为就像是reactive一样，而且我甚至不需要vuex：

<script setup>
import {reactive} from 'vue';

const state = reactive({
    image: sessionStorage.image || ""
})

axios.get('/home')
    .then(res => {
        const data = res.data[0]
        state.image = sessionStorage.image = 'storage/' + data['image']
    })
</script>

这样，如果sessionStorage在初始加载期间未定义，则reactive函数选择空字符串，并将值从axios.get分配到sessionStorage。在所有连续的页面加载中，reactive函数使用sessionStorage，现在已为其分配了值。
编程很有趣。有时你会学会如何用1个LOC替换100行代码。

解决方案（旧）：

好了，现在我的存储按照我想要的方式工作。它是global，reactive，persistent，并且易于使用。我会接受@艾尔莎的回答，因为她帮助我研究了vuex。
我在一个单独的**store.js**文件中创建了一个store：

import {createStore} from "vuex";

const store = createStore({
    state() {
        return {
            image: sessionStorage.image || ""
        }
    }
})
export default store

然后在**app.js**中注册：

require('./bootstrap');

import {createApp} from 'vue';
import app from "../vue/app";
import store from "./store";

createApp(app)
    .use(store)
    .mount("#app");

现在我可以在我的组件中使用store，如下所示：

<template>
  <section id="home" class="home">
    <div class="image-container">
      <div class="home-image" :style="{'background-image': 'url(' + store.state.image + ')'}"></div>
    </div>
  </section>
</template>

<script setup>
import {useStore} from "vuex";

const store = useStore()

if (!sessionStorage.image) {
    axios.get('/home')
        .then(res => {
            const data = res.data[0]
            store.state.image = sessionStorage.image = 'storage/' + data['image']
        })
}
</script>

axios请求仅在sessionStorage.image未定义时运行，否则其值将直接呈现。如果链接存在，则图像不会首先重新加载到模板中，而是立即呈现。
我现在可能会完全省略state = reactive，因为我可以全局使用store.state，甚至将其链接到ss/ls。我唯一需要维护的是内部的字段：

const store = createStore({
    state() {
        return {
            image: sessionStorage.image || ""
        }
    }
})

因为如果我不这样做，vue会抛出404 errors（但由于React性，无论如何都会呈现元素）。