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

Question

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

问题是 sessionStorage 没有反应。当我这样做时：

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>

这样 reactive 函数会选择一个空字符串，如果 sessionStorage 在初始加载期间未定义并将值从 axios.get 分配给 sessionStorage。在所有连续的页面加载中，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未定义时运行，否则直接呈现其值。如果 link 存在，则图像不会首先重新加载到模板中，而是立即渲染。

我现在可能会完全省略 state = reactive，因为我可以在全局范围内使用 store.state，甚至 link 到 ss/ls。我唯一需要维护的是里面的字段：

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

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

Answer 1

一周前我遇到了这个问题，我尝试了 3 种方法来使 vue3 中的 sessionStorage 具有反应性。 1.vuex 2.create 事件侦听器 3.setInterval

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

1.vuex

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

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

3.setInterval

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

Answer 2

首先，sessionStorage 不能是反应式的。

如果我的理解正确，您只需要一个全局变量即可响应。您可以简单地通过提供和注入来实现它：

const yourGlobalVar = sessionStorage.getItem('image');
app.provide('yourImage', ref(yourGlobalVar))

在哪里使用它：

setup(){
   ...
   const image = inject('yourImage');
   ...
   return {image}
}

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

Any way to make sessionStorage reactive in Vue3?

html

javascript

session-storage

vue.js

vuejs3