Импорт / экспорт переменных javascript для проекта vuejs - PullRequest
Новая
       35

Импорт / экспорт переменных javascript для проекта vuejs

0 голосов
/ 22 октября 2018

Вероятно, это не лучший пример того, почему кто-то захочет экспортировать / импортировать переменные из одного javascript в другой, но, надеюсь, это достаточно хорошо.

У меня есть один файл javascript, где я инициирую переменную, давайте назовем эту переменную counter и файл javascript, который находится в CounterModel.js.У меня также есть файл javascript, который действительно что-то делает с моим счетчиком, который называется CounterController.js.

. В моих файлах vue я хочу запустить свой счетчик в App.vue и изменить его в Counter.vue.

Итак, у меня есть такая настройка ниже, и она дает мне три похожих предупреждения, поэтому я, должно быть, делаю что-то не так.Поэтому я хотел бы спросить:

Что здесь не так?

вывод 

WARNING  Compiled with 3 warnings                                                                                                                                                    06:35:49

 warning  in ./src/App.vue?vue&type=script&lang=js&

"export 'default' (imported as 'counter') was not found in './api/CounterModel'

 warning  in ./src/components/counter/Counter.vue?vue&type=script&lang=js&

"export 'default' (imported as 'counterController') was not found in '../../api/CounterController'

 warning  in ./src/components/counter/Counter.vue?vue&type=script&lang=js&

"export 'default' (imported as 'counterController') was not found in '../../api/CounterController'

CounterModel.js 

export let counter

async function initiateCounter () {
  counter = 0
}

module.exports = {
  initiateCounter
}

CounterController.js 

import { counter } from './CounterModel'

async function incrementCounter () {
  counter++
}

async function getCounter () {
  return counter
}

module.exports = {
  incrementCounter,
  getCounter
}

App.vue 

<template>
<div>
      <router-view></router-view>
</div>
</template>

<script>

import counter from '~/api/CounterModel'

export default {
  name: 'App',
  async created () {
    await counter.initiateCounter()
  }
}

</script>

Счетчик.vue 

<template>

<div>
      <button v-on:click="incrementCounter">Add 1</button>
    {{ counter }}
</div>
</template>

<script>
import counterController from '~/api/CounterController'

export default {
  name: 'Counter',
  data () {
    return {
      counter: null
    }
  },
  methods: {
    incrementCounter: async function () {
      counterController.incrementCounter()
    },
    getCounter: async function () {
      this.counter = counterController.getCounter()
    }
  },
  async created () {
    await this.getCounter()
  }
}
</script>

Ответы [ 2 ]

0 голосов
/ 22 октября 2018

Я хотел бы добавить, что самая большая проблема, с которой я столкнулся, заключалась в устранении последнего предупреждения, которое, как я думал, касалось экспорта и импорта счетчика в файлах javascript, но на самом деле касалось импорта функций счетчика в файлах vue.что он выдавал предупреждения о.

Это -> import counter from '~/api/CounterModel' требует экспорта по умолчанию.

Фактический код содержит два объекта, один "app.js" и один "counter.js", гдеобъект приложения необходим для изменения «счетчика».Надеемся, что «app» никогда не требуется никаких модификаций вне его собственного файла.

Итак, что я действительно хотел, так это ближе:

app.js 

export let app

async function initialiseApp () {
  app = window.safe.initialiseApp()
}

export default {
  initialiseApp
}

counter.js 

import { app } from '~/api/safenetwork'

async function createCounter () {
  counter = await app.createCounter()
}

async function incrementCounter () {
  await counter.increment()
}

async function getCounter () {
  return counter
}

export default {
  createCounter,
  incrementCounter,
  getCounter
}
0 голосов
/ 22 октября 2018

Прежде всего, вы не должны путать импорт / экспорт и требовать / module.exports.import / export - это синтаксис ES6, а require / module.export - это синтаксис Commonjs.

  1. в App.vue, если вы используете import counter from '~/api/CounterModel', что означает, что вы должны экспортировать счетчик по умолчанию в CounterModel.js

let counter=0; export default counter

В противном случае вы можете использовать import {counter} from '~/api/CounterModel'

Та же причина для import counterController from '~/api/CounterController'.Если вы хотите использовать импорт в файле Counter.vue, используйте синтаксис экспорта ES6 в CounterController.js вместо module.exports.

`` `

import { counter } from './CounterModel'

async function incrementCounter () {
  counter++
}

async function getCounter () {
  return counter
}

export incrementCounter;
export getCounter;

```

А также вы должны заметить, что только что импортированный счетчик на самом деле не редактируется.Потому что ES6 рассматривает импортируемую стоимость как постоянную.Он получит typeError, если вы попытаетесь изменить.Но это можно изменить в CounterModel.js

...