如何在VueJS组件中调用外部JS文件函数并将返回值作为组件数据使用

你当前遇到的未定义报错，核心原因是组件运行在独立的模块作用域中，直接调用readLocalStorage时不会默认去全局window对象上查找该方法，因此会触发报错。

根据你项目的引入方式，对应两种修复方案：

场景1：通过HTML的<script>标签直接引入localStorage.js #

这种情况下readLocalStorage是挂载在window全局对象上的，调用时明确指定window前缀即可，同时建议把返回值封装在data的单独字段里，方便后续v-for遍历和数据操作：

export default {
    name: 'lista',
    components: {
        codiceLista
     },
     data(){
       return {
         // 明确从全局window上读取方法
         storageList: window.readLocalStorage()
       }
     }
}

后续模板中直接用v-for="item in storageList"遍历即可。

场景2：使用Vue CLI/Vite等模块化工具构建项目 #

更推荐用模块化导入的方式引入方法，不需要全局挂载：

1. 先修改localStorage.js，导出需要用到的方法：

// localStorage.js 原有逻辑不变，末尾添加导出语句
export { readLocalStorage }

2. 在当前组件顶部导入该方法后直接调用：

// 路径根据你实际的文件存放位置调整
import { readLocalStorage } from '../utils/localStorage.js'

export default {
    name: 'lista',
    components: {
        codiceLista
     },
     data(){
       return {
         storageList: readLocalStorage()
       }
     }
}

如果localStorage里的内容会在页面运行过程中动态更新，不要只在data初始化时读取一次，你可以把读取逻辑放到mounted钩子中，或者搭配存储监听事件更新storageList的值，才能保证页面渲染内容和存储内容同步。

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