如何使用ES6保持javascript导入对象的状态？

Question

I'd like to initialise an object with specific values, and have another object that uses the value of the previously initialized object... Better than too many words, I have the following:

// file1.js
export default {
  myVar1: null,
  initialize(value) {
    this.myVar1 = value
  }
}

The file2 imports file1 and create a function to print myVar1

// file2.js
import { myVar1 } from 'file1'

export default {
  printVar() {
    console.log(myVar1)
  }
}

file3 initialize file1 and uses file2 to print the value of myVar1

// file3.js
import File1 from 'file1'
import File2 from 'file2'

File1.initialize('hello world')
File2.printVar() // logs undefined

I want to initialize file1 and wants file2 to access the value of file1 to print it. Although its value is undefined when it gets imported.

I would like to use a factory pattern in Javascript to do that. Is there a way to achieve the following?

Thanks

Answer 1

Change your file2 to this

import file1 from './file1'

export default {
  printVar() {
    console.log(file1.myVar1)
  }
}

Answer 2

This is an anti-pattern to depend on the module caching and object references for such issues, regardless.

you need to import the whole file to get the reference instead of the actual value, so you have to do:

import file1 from './file1'

export default {
  printVar() {
    console.log(file1.myVar1)
  }
}

this way u dont just import the value of myVar1 , you import a reference to the object, so you can modify the object content and always get it reflected everywhere.

PS this is NOT recommended, and NOT good composition.