时间戳

首页 > 解决方案 > 为函数的每个实例创建唯一的存储值

javascript - 为函数的每个实例创建唯一的存储值

问题描述

我正在尝试为创建的函数的每个实例创建一个唯一的存储值，但由于某种原因，我创建的函数的每个实例都使用相同的存储值。

我正在创建一个简单的商店功能，然后在该功能内创建商店。但是，即使在函数的每个实例中都创建了存储，它们也被共享。为什么会发生这种情况。

这是一个代码沙盒沙盒

这是代码

createStore.js

const createStore = (initialState) => {
  const state = initialState;

  const get = () => state;
  const set = (key, value) => (state[key] = value);

  return {
    get,
    set
  };
};

export default createStore;

主功能

import createStore from "./createStore";
import initialState from "./initialState";

const controller = () => {
  const store = createStore(initialState);

  const setStore = (key, val) => store.set(key, val);
  const getStore = () => store.get().string;

  return {
    setStore,
    getStore
  };
};

export default controller;

然后我试图通过创建多个控制器实例来使用它们，如下所示：

import controller from "./controller";

const ctl1 = controller();
const ctl2 = controller();

ctl1.setStore('string', 'Hello')
ctl2.setStore('string', 'Welcome')

clt1.getStore() // will output the last set store value of ctl2

标签： javascriptstore

解决方案

看起来问题是initialState您正在导入的是一个共享引用，您正在使用它来启动您的商店状态。因此，问题不在于您的商店代码是否正确解耦（似乎是），而在于您正在操作相同的底层引用对象initialState。

修复方法 1

您可以通过克隆/复制initialState而不是直接使用其引用来解决此问题。

下面是一个使用 lodash 的示例：

import { cloneDeep } from 'lodash';

/* ... */

const store = createStore(cloneDeep(initialState));

这是该方法的代码框： https ://codesandbox.io/s/modern-frog-npd2w

修复方法 2

您可以考虑的另一种选择是没有共享单例模块，initialState而是将其作为工厂函数来创建该初始状态，这也可以解决相同的问题：

import { createInitialState } from './initialState';

/* ... */

const initialState = createInitialState();
const store = createStore(initialState);

这是该方法的代码框： https ://codesandbox.io/s/charming-greider-5go5t

推荐阅读