Vue中挂载到window的全局AppStorage调用后localStorage无法存值

常见失效原因 #

• 作用域查找失败：Vue单文件组件/局部函数作用域中直接写AppStorage不会自动读取window上的挂载对象，必须显式加上window.前缀才能访问全局挂载的属性。
• 挂载时机晚于调用时机：如果window.AppStorage = AppStorage的挂载逻辑写在Vue实例初始化、路由注册等代码之后，而你的调用逻辑（比如地理定位API回调、提前执行的第三方脚本逻辑）执行时间早于挂载逻辑，此时window.AppStorage为undefined，调用自然失效。
• 模块导入顺序问题：如果调用AppStorage的代码所在的模块，导入顺序早于app.js中挂载全局对象的逻辑，也会出现访问不到的问题。

排查步骤 #

1. 在调用代码前增加打印console.log(window.AppStorage)，如果控制台输出undefined，可确认是挂载时机问题；如果能正常输出实例对象，可在storeLocation方法内部增加参数打印，确认方法有没有被正常触发，同时检查浏览器是否禁用了localStorage（比如无痕模式、部分浏览器隐私配置会限制localStorage写入）。

修复方案 #

1. 所有调用位置显式加window前缀，修改调用代码为：

window.AppStorage.storeLocation(position.coords.latitude,position.coords.longitude);

2. 调整挂载逻辑的位置，把window.AppStorage = AppStorage放到app.js最顶部，紧接在AppStorage的导入语句之后，放在所有Vue初始化、路由注册等逻辑之前，确保挂载优先执行。
3. 兼容执行顺序问题，如果存在调用时机不可控的情况，可以增加兼容判断：

// 调用前先判断是否挂载完成
if (window.AppStorage) {
  window.AppStorage.storeLocation(position.coords.latitude, position.coords.longitude)
} else {
  // 未挂载完成可延迟重试，或监听挂载完成事件
  setTimeout(() => {
    window.AppStorage.storeLocation(position.coords.latitude, position.coords.longitude)
  }, 100)
}

另外你当前AppStorage类的导出写法存在类名与实例变量重名的问题，虽然不是直接导致失效的原因，建议修改为更规范的写法避免潜在问题：

class AppStorage{
    storeLat(lat){
        localStorage.setItem('lattitude',lat);
    }
    storeLong(long){
        localStorage.setItem('longitude',long);
    }
    storeLocation(lat,long){
        this.storeLat(lat);
        this.storeLong(long);
    }
   
}
const appStorageInstance = new AppStorage()
export default appStorageInstance

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