Vuejs、组件和缓存

Question

我正在寻找一种方法来 'cache' 在我的应用程序中获取一些 API 数据，并发现它可以简单地使用 localStorage（甚至 sessionsStorage）

虽然它工作正常，但我正在寻找一种方法将所有缓存数据放在一个 localStorage 条目中（在 JSON 中）

问题是我不知道如何在不覆盖前一项的情况下构建 JSON 树。让我解释一下：

在我的仪表板上，我有两个组件，一个加载类别，另一个加载最后一篇文章。每个组件使用不同的端点。

这是我设置缓存的方式（针对类别）：

methods: {
    async getCategories() {

      let response = await fetch('https://carreblanc.zendesk.com/api/v2/help_center/fr/categories.json', {
        method: 'GET',
        headers: zendeskHeaders,
      })

      if (response.status === 200) {
        let data = await response.json();
        this.categories = data.categories

        // Build cache
        let cacheData = []
        cacheData.push(data)
        sessionStorage.setItem('zhc_db_cat_cache', JSON.stringify(cacheData))
      }
      else {
        console.log("Something went wrong (" + response.status + ")");
        return Promise.reject(response);
      }
    },
    setUrl(url) {
      return decodeURI(url.substring(url.indexOf('-') + 1))
    }
  },

文章：

methods: {
    async getArticles() {

      let response = await fetch('https://carreblanc.zendesk.com/api/v2/help_center/fr/articles.json', {
        method: 'GET',
        headers: zendeskHeaders,
      })

      if (response.status === 200) {
        let data = await response.json();
        this.articles = data.articles
        
        // Build cache
        let cacheData = []
        cacheData.push(data)
        sessionStorage.setItem('zhc_db_art_cache', JSON.stringify(cacheData));
      }
      else {
        console.log("Something went wrong (" + response.status + ")");
        return Promise.reject(response);
      }
    },
    setUrl(url) {
      return decodeURI(url.substring(url.indexOf('-') + 1))
    }
  },

这会在 sessionStorage 中产生两个条目：

我只想要一个项目，比方说 'zhc_cache'，我可以在其中加载组件时更新数据..

例如：仪表板：{ 类别：{ …… }, 文章：{ …… } }

我认为异步函数有问题，但我想不通，

任何帮助将不胜感激:)

谢谢

Answer 1

如果我没理解错的话，您只想要一个 JSON 包含类别和数据的对象？在那种情况下，我认为您应该创建一个对象 ("zn_cache")，在其中添加类别和文章

//If you want to keep both functions, just set vuejs data variables (categories and articles) and affect them the data you fetched from the api
this.categories = data.categories
this.articles = data.articles

然后你可以用两者创建一个全局对象（检查语法我不是 100% 确定）

let dashboard = { 'categories' : this.categories, 'articles' : this.articles}

然后你可以存储这个坏男孩

Answer 2

@antoinehenrio

很有魅力 ;)

现在是仪表板

const zendeskConfig = {
  categoriesEndpoint: 'https://carreblanc.zendesk.com/api/v2/help_center/fr/categories.json',
  articlesEndpoint: 'https://carreblanc.zendesk.com/api/v2/help_center/fr/articles.json'
};

import Categories from '/skin/frontend/carreblanc/revamp/js/zendesk/hc/components/dashboard/categories.js'
import Recents from '/skin/frontend/carreblanc/revamp/js/zendesk/hc/components/dashboard/recent-activity.js'

export default {
  components: {
    Categories,
    Recents
  },
  data() {
    return {
      categories: [],
      articles: [],
    }
  },
  methods: {
    getData() {
      Promise.all([
        fetch(zendeskConfig.categoriesEndpoint).then(res => res.ok && res.json() || Promise.reject(res)),
        fetch(zendeskConfig.articlesEndpoint).then(res => res.ok && res.json() || Promise.reject(res))
      ]).then(([resCategories, resArticles]) => {
        this.categories = resCategories.categories
        this.articles = resArticles.articles
        let cacheData = { dashboard: { 'categories' : this.categories, 'articles' : this.articles} }
        sessionStorage.setItem('zhc_db_cache', JSON.stringify(cacheData))
      })
    }
  },
  created() {
    this.getData()
  },
  template: `
    <div class="row">
      <div class="col col-12"> 
        <Categories :categories=this.categories />
      </div>
      <div class="col col-12"> 
        <Recents :articles=this.articles />
      </div>
    </div>
    `
}

结果：

我必须重新配置其他视图，但现在应该很容易了

再次感谢！

Vuejs、组件和缓存

Vuejs, components and cache

vue.js

caching