javascript Gatsby从本地存储获取数据的最佳做法

lf3rwulv 于 2023-02-07 发布在 Java

关注(0)|答案(1)|浏览(135)

我希望每次应用程序启动时都能从本地存储中获取数据（在运行时），然后将其存储在存储中。
盖茨比的文档解释了这样做的方法：https://www.gatsbyjs.com/docs/conceptual/data-fetching/
基本上，只需在页面中使用useEffect钩子，然后从本地存储中获取数据。然而，我希望独立于正在访问的页面获取此数据。例如，如果我在索引页面上获取数据，而用户刷新另一个页面，则不会获取数据。我希望在常规React应用中的App.tsx文件中执行此操作。
我目前的解决方案是在wrap-pages文件中执行此操作：

const MyLocalStorage = ({ children }) => {
  const { getLocalStorage} = fromStore()

  useEffect(() => {
    getLocalStorage() // fetches data from local storage
  }, [])
  return null
}

export function wrapPagesDeep({ element }) {
  return (
    <>

        <MyLocalStorage/>
        {element}

    </>
  )
}

然而这并没有多大意义。这个文件是用来 Package 组件的，而不是用来提取数据的。请问正确的方法是什么？

JavaScript

来源：https://stackoverflow.com/questions/75351472/gatsby-fetch-data-from-local-storage-best-practice

1条答案

按热度按时间

nfs0ujit1#

根据您的体系结构、设计系统和用例（例如，从提供者到 Package 器，从独立的服务到控制器，等等），有多种方法。
如果不了解决策中涉及的所有内容，就没有所谓的“最佳实践”：制作一些超级复杂和孤立的逻辑（如添加MVVM：控制器、存储器等）可能看起来不错，但对于简单场景而言可能是极坏的做法，反之亦然：对于复杂的应用程序来说，简单直接的方法可能是一个糟糕的解决方案。
按照您的方法，我认为可以通过将此逻辑移到Layout（或 Package 应用程序的 Package 器）中并向其添加location prop来轻松地隔离（和重用）它。

const Layout = ({ children, location = {} }) => {
  const { getLocalStorage} = fromStore()

  useEffect(() => {
    getLocalStorage() // fetches data from local storage
  }, [location])

  return (
    <>
        <main>{children}</main>
    </>
  )
}

export default Layout

然后，在每次使用Layout时：

const SomePage = ({ location }) => {
  return (
    <Layout location={location}>
      <h1>Some content</h1>
    </Layout>
  );
};

注意：location prop默认情况下在所有顶层组件（页面和模板）中被继承，如您在文档中所见 *

因此，每次位置改变时，您将获取本地存储数据。这可以很容易地移动到自动更新值的提供程序。您只需要相应地 Package 您的应用程序。

赞(0）回复(0）举报 2023-02-07

我来回答

javascript Gatsby从本地存储获取数据的最佳做法

1条答案

相关问题

热门标签

最新问答