调用Framework.store方法触发Cannot set properties of undefined报错如何修复

报错根因 #

你没有提前初始化window.fStore全局对象，当Framework.store方法执行赋值操作window.fStore[key] = value时，window.fStore本身是undefined，对undefined设置属性自然会抛出类型错误。

同时你的代码还存在额外逻辑缺陷：DOM遍历逻辑在framework.js加载时就会同步执行，此时你还没有调用Framework.store存入值，就算修复了报错，页面的f-text绑定也不会生效。

修复方案 #

修改你的framework.js代码如下：

// 初始化全局存储对象
window.fStore = window.fStore || {};

// 抽离DOM更新公共方法
function updateDomBindings() {
  document.querySelectorAll('*').forEach((element) => {
    if (element.hasAttribute('f-text')) {
      const textValue = element.getAttribute('f-text');
      element.innerHTML = window.fStore[textValue] || '';
    }
  });
}

window.Framework = {
  store: (key, value = '') => {
    if (value === '') {
      return window.fStore[key];
    }
    window.fStore[key] = value;
    // 存值后主动触发DOM更新，保证页面内容同步
    updateDomBindings();
  }
}

// 页面加载完成后自动执行一次绑定，兼容提前写入存储的场景
document.addEventListener('DOMContentLoaded', updateDomBindings);

修复说明 #

• 提前初始化window.fStore为空对象，避免赋值时找不到对象的报错
• 将DOM更新逻辑抽成独立方法，每次调用store存值后主动触发更新，保证数据变更后页面同步刷新
• 增加页面加载完成后的自动绑定逻辑，如果你提前在全局存了值也能正常渲染

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