在服务器端渲染 JS 时处理具有本地状态的单例/模块答案

【问题标题】：Dealing with singletons/modules with local state when Server Side Rendering JS在服务器端渲染 JS 时处理具有本地状态的单例/模块
【发布时间】：2020-09-03 08:48:13
【问题描述】：

在 JS 中，所有模块都被缓存（例如由 Node 直接缓存或由浏览器中的 Webpack 缓存），因此本质上它们默认都是单例的。

其中一些有时包含状态，例如本例中的模块：

// foo.js

let state = 0;

export function incrementNumber() {
  state++;
}

export function getNumber() {
  return state;
}

这些问题是，当它们为客户端制作时，假设状态将仅针对特定浏览器选项卡会话是全局的 - 一旦页面被刷新/离开，状态就消失了。但是，如果您尝试在服务器端渲染具有此类模块的 JS 应用程序，则有状态单例的行为将有所不同，并且状态将在所有用户之间泄漏。

考虑到我有一个客户端 Vue 应用程序，其中包含一些类似这样的模块，并且我想实现 SSR - 重构这些模块以使其正常工作的最佳方法是什么？我需要该组件在客户端是一个单例，但我不希望在服务器端的每个单独请求中都有它的单个实例。

【问题讨论】：

你能告诉我们你在哪里以及如何调用这些函数（以典型的方式）吗？
"我需要该组件在客户端是一个单例" - 你真的吗？是的，您只想在客户端创建一个实例，但这并不一定要创建一个单例。

标签： javascript vue.js design-patterns server-side-rendering

【解决方案1】：

我面临与模块单例相同的问题。幸运的是，我们没有那么多。到目前为止，我们正在重构所有这些，并尝试将基本的单例数据保持在 redux 状态或以某种方式在 react 应用程序上下文中，如组件内部。

祝你好运！

【讨论】：