如何在 Vue3 中存储/缓存来自 CMS 的请求数据？

Question

我在Vue3/Laravel8 app 中使用Laravel Nova 构建了一个原始Content Management System。作为菜鸟，我使用axios.get 从database 获取图像链接和降价，并将其分配给reactive state，如下所示：

<script setup>
import {reactive} from 'vue';
import DOMPurify from "dompurify";
import marked from "marked";

const state = reactive({
    locale: sessionStorage.locale,
    content: "",
    image: ""
})

axios.get('/home')
    .then(res => {
        const data = res.data[0]
        state.content = DOMPurify.sanitize(marked(data['content_' + state.locale]))
        state.image = 'storage/' + data['image']
    })
    .catch(err => {
        console.log(err);
        console.log(err.response);
    });

</script>

并在我的模板中渲染image/markdown：

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

这会产生两个问题：

1. 每次刷新或加载页面时，应用程序都必须等待response。
2. 每次刷新或加载页面时都会呈现images/content。

有没有办法缓存response data？我只需要存储string information。

我已尝试使用 sessionStorage 执行此操作，但在初始页面加载期间它不适用于 state = reactive()（或者有办法吗？）。

Answer 1

是的，您可以使用localStorage 或sessionStorage 来实现此目的。只需在设置时将对象转为字符串，在使用时转回即可。

例子：

...
  const setState = data => {
    state.content = DOMPurify.sanitize(marked(data['content_' + state.locale]))
    state.image = 'storage/' + data['image']
  }

  if (localStorage.getItem('home')) {
    const data = JSON.parse(localStorage.getItem('home'))
    setState(data[0])
  } else {
    axios.get('/home')
      .then(res => {
        localStorage.setItem('home', JSON.stringify(res.data))
        setState(res.data[0])
      })
  }
...

JSFiddle