javascript - 有什么方法可以使 sessionStorage 在 Vue3 中具有反应性？

Question

假设我构建了一个应用程序，它在每次加载或刷新时通过 axios.get 从数据库中获取数据。这使得应用变慢，所以我只想在应用的初始加载中获取数据并将其放入sessionStorage。

问题是 sessionStorage 不是响应式(Reactive)的。当我这样做时:

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

并想要渲染:

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

它仅在 sessionStorage 已在上一次页面加载中更新时才有效。对于初始页面加载，state.image 会抛出一个 404 not found。

有什么方法可以使 sessionStorage 具有反应性吗？我读过有关 watchers、set 和 get 的内容，但不太明白。

解决方案(新):

Aaaa 实际上，我刚刚找到了一种方法，可以让 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 中的值分配给 session 存储。在所有连续的页面加载中，reactive 函数使用 sessionStorage，现在已为其分配了一个值。

编码很有趣。有时您学习如何用 1 LOC 替换 100 行代码。

解决方案(旧):

好的，现在我的存储按照我想要的方式运行。它是 global、reactive、persistent 且易于使用。我会接受@Elsa 的回答，因为她帮助我研究了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 错误(但由于 react 性，无论如何都会呈现元素)。

Answer 1

一周前我遇到了这个问题，我尝试了 3 种方法来使 vue3 中的 sessionStorage 具有反应性。1.vuex2.创建事件监听器3.设置间隔

我找到了解决 setInterval 问题的临时解决方案。

1.vuex

const state = () => {
  return {
    latInfo: sessionStorage.getItem('lat') || 0
  }
}

const getters = {
  latInfo: state => state.latInfo
}

3.设置间隔

  setup() {
    setInterval(() => {
      if (infoData) {
        infoData.lat = sessionStorage.getItem('lat')
      }
    }, 1000)