假設我構建了一個應用程式，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卻不能完全弄明白。
解決方案（新）：
Aaaaactually，我剛剛找到了一種方法來讓sessionStorage行為表現得好像它在reactive期間一樣initial load，我什至不需要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.getto分配sessionStorage。在所有連續頁面加載時，該reactive函式使用sessionStorage，現在已為其分配了一個值。
編碼很有趣。有時您會學習如何用 1 個 LOC 替換 100 行代碼。
解決方案（舊）：
好的，現在我的存盤按照我想要的方式作業。它是global, reactive,persistent并且易于使用。我會接受@Elsa 的回答，因為她幫助我調查了vuex.
我store在一個單獨的store.js檔案中創建了一個：
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（但由于反應性無論如何都會渲染元素）。
uj5u.com熱心網友回復：
一周前我遇到了這個問題，我嘗試了 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)
uj5u.com熱心網友回復：
首先， sessionStorage 不能是反應式的。
如果我的理解正確，您只需要一個全域變數是反應性的。您可以通過提供和注入簡單地實作它：
const yourGlobalVar = sessionStorage.getItem('image');
app.provide('yourImage', ref(yourGlobalVar))
在哪里使用它：
setup(){
...
const image = inject('yourImage');
...
return {image}
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/344818.html
標籤：javascript html Vue.js Vuejs3 会话存储