导入ES6模块会初始化变量吗？Vue路由切换数据丢失问题咨询

你的猜测是否正确？ #

不正确。ES模块（包括Vue项目中的TS/JS模块）遵循单例模式：同一模块无论被多少组件导入，只会在第一次被导入时初始化一次，模块内的变量是全局共享的，不会因为路由切换或重复导入而重新初始化。

为什么会出现有时返回undefined的情况？ #

可能的原因包括：

• 执行顺序问题：B.vue中调用getAttribute的时机早于A.vue的setAttribute。比如B.vue是被缓存的组件（如使用<keep-alive>），在A.vue设置值之前就已经完成了初始化；或者路由切换时的异步加载逻辑导致B的代码先执行。
• 页面意外刷新：如果路由切换时用了原生<a>标签而非Vue Router的<router-link>或$router.push()，会触发页面刷新，此时所有模块会重新初始化，之前存在sessionAttr里的数据自然丢失。
• 导入路径不一致：如果不同组件导入Util时用了不同的路径（比如A用@/util，B用../util），部分打包工具可能会将其视为两个不同的模块，导致各自初始化，数据不共享。
• 数据被意外清空：项目中其他地方可能调用了removeAttribute('ssACNo')，或者sessionAttr对象被其他代码意外重置。

如何保证路由切换时数据保留？ #

• 规范路由跳转方式：统一使用Vue Router提供的方式跳转路由，比如<router-link to="...">或在代码中调用this.$router.push('/B')，避免页面刷新。
• 统一模块导入路径：所有组件导入Util时使用完全一致的路径，比如都用@/util，确保打包工具识别为同一模块。
• 排查数据修改逻辑：在session的三个方法中添加日志，追踪数据的修改情况，定位是否有代码意外清空数据：

// util.ts
const sessionAttr = {}

const session = {
    setAttribute(k: string | number, v: any) {
        console.log('set', k, v);
        sessionAttr[k] = v
    },
    getAttribute(k: string | number) {
        const val = sessionAttr[k];
        console.log('get', k, val);
        return val;
    },
    removeAttribute(k: string) {
        console.log('remove', k);
        delete sessionAttr[k]
    }
}

export const Util = {
    session,
}

• 改用Vue官方状态管理方案：如果是Vue 2可以用Vuex，Vue 3用Pinia，这类状态管理库专门用于跨组件共享状态，比自定义模块更可靠，也更易维护。
• 持久化需求的备选方案：如果需要页面刷新后也保留数据，可以将数据存在sessionStorage或localStorage中，修改util.ts如下：

// util.ts
const session = {
    setAttribute(k: string | number, v: any) {
        sessionStorage.setItem(String(k), JSON.stringify(v))
    },
    getAttribute(k: string | number) {
        const val = sessionStorage.getItem(String(k));
        return val ? JSON.parse(val) : undefined;
    },
    removeAttribute(k: string) {
        sessionStorage.removeItem(k)
    }
}

export const Util = {
    session,
}

原代码示例 #

// util.ts
const sessionAttr = {}

const session = {
    setAttribute(k: string | number, v: any) {
        sessionAttr[k] = v
    },
    getAttribute(k: string | number) {
        return sessionAttr[k]
    },
    removeAttribute(k: string) {
        delete sessionAttr[k]
    }
}

export const Util = {
    session,
}

// A.vue
import { Util } from '@/util'

Util.session.setAttribute('ssACNo', 'someString')

// B.vue
import { Util } from '@/util'

Util.session.getAttribute('ssACNo') // 'someString' ..?

内容的提问来源于stack exchange，提问作者powerfulH