Как использовать ту же переменную при использовании компонента .vue во внешних файлах .js?

Question

У меня есть отдельный файловый компонент .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>

---

Теперь я разделился на два файла, baz.js, qux.js, и онивыглядеть следующим образом:

foobar.vue

<script src="@/baz.js"></script>
<script src="@/qux.js"></script>
<script>
import { baz } from '@/baz';
import { qux } from '@/qux';

let foo; // I want to manipulate this from external files

export default {
  data() {
    return {
      bar: [0, 1, 2, 3], // I also want to manipulate this from external files
    }
  },
  methods: {
    baz,
    qux,
  }
}
</script>

baz.js

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

export { baz };

qux.js

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

export { qux };

---

Очевидно, что это не работает, потому что baz() и qux() не могут видеть foo и this.bar (в data()).Итак, что я должен сделать, чтобы иметь возможность видеть и манипулировать foo и bar?

Спасибо!

Answer 1

Ну, Vue предлагает $root Экземпляр для доступа к переменным и методам на глобальном уровне.Плюс случай также реактивен.

Скажем, если оба ваших компонента foo & bar привязаны к основному компоненту с именем App.

Теперь определите переменную внутри объекта данных компонента App.

Для доступа к данным из компонента App вы можете получить к ним доступ из $root из Vue.

const Foo = {
  template: '<span> {{this.$root.foo}} {{this.$root.from}} </span>'
};

const Baz = {
  template: '<span> {{this.$root.baz}} {{this.$root.from}} </span>'
};

new Vue({
  el: '#app',
  data: {
    foo: 'Foo',
    baz: 'Baz',
    from: 'from app component'
  },
  components: {
    Foo,
    Baz
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <Foo></Foo>
  <br />
  <Baz></Baz>
</div>

ПРИМЕЧАНИЕ: $ root для работы с файлом .vue

Надеюсь, это поможет!

Answer 2

Вы должны взглянуть на Mixins .

Вот простой пример, который вы можете попробовать:

// 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>

Answer 3

Использовать window.foo - сохранить переменную в глобальной области видимости
Или добавьте common.js файл и там добавьте:

export var foo;

и в baz.js и qux.js импортировать их

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