Как правильно экспортировать переменные из es6 модуля?

Question

У меня есть модуль timer.js. У него есть метод start, который каждую секунду через setInterval вызывает метод update инкрементирующий переменную seconds.

Почему в коде ниже в консоли выводится 0 а не 3? Как правильно шарить переменную в es6 модуле?

   import timer from './modules/timer'
    timer.start();
    setTimeout(function(){
        console.log(timer.seconds);
    }, 3000);

timer.js

let timer = null;
let seconds = 0;

function start() {
    timer = setInterval(update, 1000);
}

function stop() {
    clearTimeout(timer);
}

function update() {
    seconds++;
}

export default {seconds, start, stop};

Для сборки я использую laravel-mix - это обертка над webpack для laravel. Не знаю важно ли это.

Answer 1

Потому что вы работаете в глобальной среде.

Ваши переменные из timer.js всегда будут с первоначальными значениями.

Иными словами вы каждый раз обнуляете переменную timer и seconds, вызывая объект timer.[любая функция]

Вы можете сделать экспорт класса или просто объекта, который будет включать в себе и переменную timer, и seconds. Тогда ваша среда будет одна и все вносимые изменения будут доступны в том же скопе.

P.S. Возможно не смог словами объяснить суть, поэтому смотрите код ниже

Пример Object:

export default {
    timer: null,
    seconds: 0,
    start: function() {
        this.timer = setInterval(() => this.update(), 1000)
    },
    stop: function() {
        clearTimeout(this.timer)
    },
    update: function() {
        this.seconds++
    }
};

Пример Class:

export default class Timer {
    timer = null;
    seconds = 0;
    start() {
        this.timer = setInterval(() => this.update(), 1000)
    }
    stop() {
        clearTimeout(this.timer)
    }
    update() {
        this.seconds++
    }
};

// Использование:
import Timer from './timer'
const timer = new Timer();