Javascript 在外部.js文件中使用.vue组件时，如何使用相同的变量？

我有一个.vue单文件组件，它有太多的行，所以我试图将其拆分为.js文件。我可以在这方面得到帮助

然而，在尝试使用来自不同文件的变量时，我仍然被卡住了

这就是旧的

foobar.vue

的样子

foobar.js

<script>
let foo; // there is one global variable (somehow I have to do this way)

export default {
  data() {
    return {
      bar: [1, 2, 3, 4],
    }
  },
  methods: {
    baz() {
      foo = 'some text';
      this.bar.push(5);
    },
    qux() {
      foo += 'lorem ipsum';
      this.bar.shift(0);
    },
  }
}
</script>

function baz() {
  foo = 'some text'; //foo undefined
  this.bar.push(5); //this.bar undefined
}

export { baz };

function qux() {
  foo += 'lorem ipsum'; // foo undefined
  this.bar.shift(0); //this.bar undefined
}

export { qux };

baz.js

<script>
let foo; // there is one global variable (somehow I have to do this way)

export default {
  data() {
    return {
      bar: [1, 2, 3, 4],
    }
  },
  methods: {
    baz() {
      foo = 'some text';
      this.bar.push(5);
    },
    qux() {
      foo += 'lorem ipsum';
      this.bar.shift(0);
    },
  }
}
</script>

function baz() {
  foo = 'some text'; //foo undefined
  this.bar.push(5); //this.bar undefined
}

export { baz };

function qux() {
  foo += 'lorem ipsum'; // foo undefined
  this.bar.shift(0); //this.bar undefined
}

export { qux };

qux.js

<script>
let foo; // there is one global variable (somehow I have to do this way)

export default {
  data() {
    return {
      bar: [1, 2, 3, 4],
    }
  },
  methods: {
    baz() {
      foo = 'some text';
      this.bar.push(5);
    },
    qux() {
      foo += 'lorem ipsum';
      this.bar.shift(0);
    },
  }
}
</script>

function baz() {
  foo = 'some text'; //foo undefined
  this.bar.push(5); //this.bar undefined
}

export { baz };

function qux() {
  foo += 'lorem ipsum'; // foo undefined
  this.bar.shift(0); //this.bar undefined
}

export { qux };

---

显然，它不起作用，因为

baz（）

和

qux（）

无法看到

foo

和

这个.bar

（在

data（）

中）。那么，为了能够看到和操作

foo

和

bar

，我应该做些什么呢

---

谢谢

使用

window.foo

-在全局范围内存储变量
或者添加

common.js

文件，然后添加：

export var foo;

并在baz.js和qux.js中导入它们

import { foo } from "./common.js"

---

Vue提供了

$root

实例来访问全局级别的变量和方法。另外，该实例也是被动的

假设您的两个组件

foo

和

bar

都绑定到名为

App

的主组件

现在在

App

组件的数据对象中定义一个变量

要从

App

组件访问数据，您可以从Vue的

$root

访问数据

const Foo={
模板：{{this.$root.foo}{{{this.$root.from}}'
};
常数Baz={
模板：{{this.$root.baz}{{{this.$root.from}}'
};
新Vue({
el:“#应用程序”，
数据：{
福：‘福’，
巴兹：“巴兹”，
from:'来自应用程序组件'
},
组成部分：{
福，
巴兹
}
})

您应该看看

下面是一个简单的示例，您可以尝试：

// mixin.js
export default {
    data() {
        return {
            mixinData: 1
        }
    },
    methods: {
        printMixinData() {
            console.log(this.mixinData)
        },
        printDataFromVueFile() {
            console.log(this.vueData)
        }
    }
}

// YourVueFile.vue
<template>
    <input type="button" @click="printMixinData" value="Print Mixin Data">
    <input type="button" @click="printDataFromVueFile" value="Print value from .vue File">
</template>

<script>
    import myMixin from './mixin.js'
    export default {
        mixins: [myMixin], // important line here
        data() {
            return {
                vueData: 2
            },
        }   
    }
</script>

//mixin.js
导出默认值{
数据（）{
返回{
mixinData:1
}
},
方法：{
printMixinData（）{
console.log（this.mixinData）
},
printDataFromVueFile（）{
console.log（this.vueData）
}
}
}
//YourVueFile.vue
从“./mixin.js”导入myMixin
导出默认值{
mixin:[myMixin]，//此处有重要一行
数据（）{
返回{
威达达：2
},
}   
}