如何在组件 vue 中使用 file.js答案

【问题标题】：How can I use a file.js in a component vue如何在组件 vue 中使用 file.js
【发布时间】：2021-09-21 23:46:37
【问题描述】：

我尝试在我的应用程序 (InputSwap.vue) 的一个组件中使用 prueba.js，其中有一个按钮 ('console.log')。我想使用那个按钮来使用这个文件，但是应用程序向我显示了这个错误：

prueba.js 让我通过单击按钮在控制台中查看数据。数据是用 window.localStorage 保存的：

window.localStorage.setItem('data_input', JSON.stringify(data));

我哪里错了？

prueba.js：

export default {
   infoPrueba() {
        var data = (JSON.parse(window.localStorage.getItem('data_input')))
        console.log(data)
    }
}

InputSwap.vue:

<template>
    <div class="card-action">
      <Button v-on:click="prueba()"
        v-bind:style="{'margin-left' : '5px', background : '#52368c'}"
        btext="Console.log" icon="code"
      />
    </div>
</template>
<script>
import Button from './Button'
import * as prueba from './prueba.js' // I have prueba.js in components folder
export default {
  name: 'InputSwap',
  components: {Button},
  methods: {
    prueba: async function () {
      prueba.infoPrueba()
    },
  },
}
</script>

【问题讨论】：

import {infoPrueba} from './prueba.js' 你可以使用解构
我尝试 import {infoPrueba} from './prueba.js' 和 const { infoPrueba } = require('./prueba.js') 都没有工作。我认为问题出在 prueba.js 内部

标签： javascript html file import vue-component

【解决方案1】：

感谢x-rw，我解决了这个问题：

我将 import * as prueba from './prueba.js' 更改为 import {infoPueba} from './prueba.js'

我在 prueba.js 中编写了这段代码：

export const infoPrueba = () => {
  var data = (JSON.parse(window.localStorage.getItem('data_input')))
  console.log(data)
}

【讨论】：