Можно ли экспортированную переменную поменять в одном модуле чтобы она изменилась в другом?

Влияние изменения экспортированной переменной между модулями в JavaScript

Да, в зависимости от типа экспорта и способа объявления переменной, экспортированную переменную можно изменить в одном модуле, и это изменение будет видно в других модулях, которые её импортируют. Однако важно понимать механизм работы экспортов в JavaScript.

Основные принципы

В JavaScript модули ES6 используют живые связи (live bindings) для экспорта именованных переменных. Это означает, что импортирующая сторона получает не копию значения, а ссылку на саму переменную модуля-экспортёра. Изменение значения по этой ссылке в одном месте отражается везде.

Пример с использованием let или var

// moduleA.js
export let counter = 0;
export function incrementCounter() {
    counter++;
}

// moduleB.js
import { counter, incrementCounter } from './moduleA.js';

console.log(counter); // 0
incrementCounter();   // Вызываем функцию из moduleA
console.log(counter); // 1 - изменение видно!

В этом примере:

1. counter экспортируется как именованная переменная.
2. moduleB.js импортирует counter и функцию incrementCounter.
3. При вызове incrementCounter() значение counter увеличивается.
4. Новое значение становится доступным в moduleB.js благодаря живой связи.

Важное исключение: экспорт const

Если переменная объявлена как const, её нельзя переприсвоить, но можно изменить внутреннее состояние, если это объект или массив:

// moduleA.js
export const config = { theme: 'dark' };
export function changeTheme(newTheme) {
    config.theme = newTheme; // Изменение свойства объекта разрешено
}

// moduleB.js
import { config, changeTheme } from './moduleA.js';

console.log(config.theme); // 'dark'
changeTheme('light');
console.log(config.theme); // 'light' - изменение свойства видно

Однако попытка полного переприсваивания вызовет ошибку:

// moduleA.js
export const config = { theme: 'dark' };
export function replaceConfig() {
    config = { theme: 'light' }; // Ошибка: Assignment to constant variable
}

Особенности экспорта по умолчанию

При экспорте по умолчанию (default export) связь также остаётся живой, но есть нюансы:

// moduleA.js
let data = { value: 10 };
export default data;
export function updateData(newValue) {
    data.value = newValue;
}

// moduleB.js
import myData, { updateData } from './moduleA.js';

console.log(myData.value); // 10
updateData(20);
console.log(myData.value); // 20 - изменение видно

Когда изменения НЕ распространяются

Изменения не будут видны, если:

1. Вы импортируете примитивное значение (число, строку, boolean) и пытаетесь изменить его напрямую в импортирующем модуле:

   // moduleA.js
   export let count = 0;
   
   // moduleB.js
   import { count } from './moduleA.js';
   count = 5; // Ошибка! Импортированные binding'ы доступны только для чтения
   

   Для изменения нужно вызывать функции из модуля-экспортёра.

2. Вы перезаписываете всю переменную вместо изменения её свойств:

   // moduleA.js
   export let obj = { x: 1 };
   
   // moduleB.js
   import { obj } from './moduleA.js';
   obj = { x: 2 }; // Ошибка: нельзя переприсвоить импортированную переменную
   

Практические рекомендации

• Для управления состоянием между модулями используйте паттерн "одиночка" (singleton) или менеджер состояния:

  // store.js
  export const state = { users: [] };
  export function addUser(user) {
      state.users.push(user);
  }
  
  // component.js
  import { state, addUser } from './store.js';
  addUser({ name: 'Alice' });
  console.log(state.users.length); // 1
  

• Для реактивности и сложных состояний рассмотрите использование Vuex, Redux или MobX, которые построены на аналогичных принципах, но предоставляют более структурированный подход.

• Помните, что живые связи работают только в пределах одного выполнения приложения. При горячей перезагрузке модулей (HMR) могут быть особенности.

Итог

Да, экспортированную переменную можно изменить в одном модуле, и изменение будет видно в других модулях, благодаря системе live bindings в ES6 модулях. Это мощный механизм для создания общего состояния между модулями, но требует понимания ограничений, особенно при работе с const и примитивными значениями. Для сложных сценариев рекомендуется использовать специальные библиотеки управления состоянием.