Ссылка на данные в функции Vue asyn c - PullRequest
Новая
       4

Ссылка на данные в функции Vue asyn c

1 голос
/ 08 января 2020

В одном из моих компонентов я использую Ax ios для получения ответов из различных источников API. Все работает нормально, когда я запускаю serve, но не при сборке.

Я считаю, что это потому, что я не понимаю, как правильно выполнять функции asyn c с Vue, чтобы он соответствовал TypeScript проверка типов и пробовал разные вещи, но пока безуспешно.

checkin. vue

<script lang="ts">
import axios from "axios";

export default {
  name: "checkin",
  components: {},
  data() {
    return {
      myCoordinates: {
        longitude: "",
        latitude: ""
      },
      myAddress: {
        city: "",
        country: "",
        country_code: "",
        county: "",
        neighbourhood: "",
        postcode: "",
        road: "",
        state: ""
      },
      addressName: "",
      timeZone: "",
      currentTime: "",
      temperature: "",
      description: ""
    };
  },
  methods: {
    fetchDetails() {
      this.setAddress();
      this.setTimezone();
      this.setWeather();
    },
    addCheckin() {
      const checkInDetails = {
        long: this.myCoordinates.longitude,
        lat: this.myCoordinates.latitude,
        localDate: this.currentTime,
        timezone: this.timeZone,
        city: this.myAddress.city || "undefined",
        state: this.myAddress.state || "undefined",
        country: this.myAddress.country || "undefined",
        temperature: this.temperature,
        description: this.description || "undefined"
      };
      console.log(checkInDetails);
      this.$store.dispatch("addCheckIn", checkInDetails);
    },

    async setCoordinates() {
      const coordinates: any = await this.currentCoordinates();
      this.myCoordinates.latitude = coordinates.latitude;
      this.myCoordinates.longitude = coordinates.longitude;
      return coordinates;
    },
    async setAddress() {
      const address = await this.addressByCoordinates();
      return address;
    },
    async setTimezone() {
      const getTimezone = await this.timezoneByCordinates();
      return getTimezone;
    },
    async setWeather() {
      const weather = await this.weatherByCoordinates();
      return weather;
    },
    async currentCoordinates() {
      return new Promise((resolve, reject) => {
        navigator.geolocation.getCurrentPosition(
          ({ coords }) => resolve(coords),
          error => reject(error)
        );
      });
    },
    addressByCoordinates: async function() {
      await axios
        .get("https://nominatim.openstreetmap.org/reverse",{
          params: {
            format: "jsonv2",
            lat: this.myCoordinates.latitude,
            lon: this.myCoordinates.longitude,
            "accept-language": "en",
          }
        })
        .then(response => {
          console.log("response", response);
          this.addressName = response.data.display_name;
          this.myAddress = response.data.address;
        })
        .catch(error => {
          console.log("error ", error);
        });
    },
    timezoneByCordinates: async function() {

      await axios
        .get("http://api.timezonedb.com/v2.1/get-time-zone", {
          params: {
            key: "KEY",
            format: "json",
            by: "position",
            lat: this.myCoordinates.latitude,
            lng: this.myCoordinates.longitude
          }
        })
        .then(response => {
          console.log("response", response);
          this.timeZone = response.data.abbreviation;
          this.currentTime = response.data.formatted;
        })
        .catch(error => {
          console.log("error ", error);
        });
    },
    weatherByCoordinates: async function() {

      await axios
        .get("https://api.openweathermap.org/data/2.5/weather", {
          params: {
            lat: this.myCoordinates.latitude,
            lon: this.myCoordinates.longitude,
            appid: "APPID",
            units: "metric"
          }
        })
        .then(response => {
          console.log("response", response);
          this.temperature = response.data.main.temp;
        })
        .catch(error => {
          console.log("error ", error);
        });
    }
  }, // end of methods
  mounted() {
    this.setCoordinates();
  },
};
</script>

Когда я пытаюсь npm запустить сборку I получить сообщения об ошибках, такие как это: 

175:23 Property 'myCoordinates' does not exist on type '{ fetchDetails(): void; addCheckin(): void; setCoordinates(): Promise<any>; setAddress(): Promise<void>; setTimezone(): Promise<void>; setWeather(): Promise<...>; currentCoordinates(): Promise<...>; addressByCoordinates: () => Promise<...>; timezoneByCordinates: () => Promise<...>; weatherByCoordinates: () => Promis...'. Did you mean 'setCoordinates'?
    173 |           params: {
    174 |             format: "jsonv2",
  > 175 |             lat: this.myCoordinates.latitude,
        |                       ^
    176 |             lon: this.myCoordinates.longitude,
    177 |             "accept-language": "en"
    178 |           }

283:10 Property 'setCoordinates' does not exist on type '{ name: string; components: {}; data(): { myCoordinates: { longitude: string; latitude: string; }; myAddress: { city: string; country: string; country_code: string; county: string; neighbourhood: string; postcode: string; road: string; state: string; }; ... 4 more ...; description: string; }; methods: { ...; }; moun...'.
    281 |   }, // end of methods
    282 |   mounted() {
  > 283 |     this.setCoordinates();
        |          ^
    284 |   },
    285 |   computed: {}
    286 | };

Я также попытался выполнить следующие функции, но это та же проблема 

    async addressByCoordinates() {
      ...
    },

В журнале отладки указано следующее: 

16 verbose Windows_NT 10.0.18362
17 verbose argv "C:\\Program Files\\nodejs\\node.exe" "C:\\Users\\ashle_000\\AppData\\Roaming\\npm\\node_modules\\npm\\bin\\npm-cli.js" "run" "build"
18 verbose node v12.14.1
19 verbose npm  v6.13.4
20 error code ELIFECYCLE
21 error errno 1
22 error travelling@0.1.0 build: `vue-cli-service build`
22 error Exit status 1
23 error Failed at the travelling@0.1.0 build script.
23 error This is probably not a problem with npm. There is likely additional logging output above.
24 verbose exit [ 1, true ]

Я заглянул в ELIFECYCLE и попробовал несколько советов (очистить кеш, удалить node_modules, установить заново и т. Д. c), но без радости.

С самими данными все в порядке, это просто не позволяет мне запустить npm run build, и я не могу понять, что мне нужно сделать, чтобы заставить его работать.

Приветствия.

1 Ответ

0 голосов
/ 08 января 2020

Firt, вам нужно использовать метод Vue .extend, чтобы разрешить Typescript выводить типы 

<script lang="ts">
import Vue from 'vue';

export default Vue.extend({
    name: "checkin",
    components: {},
    methods: {
        // ...
    },
});
</script>

Вам также необходимо установить типы данных данных объект. Добавьте аннотацию типа для возвращаемого объекта для функции данных. 

<script lang="ts">
import Vue from 'vue';

export default Vue.extend({    
    data(): {
        myCoordinates: {
            longitude: string,
            latitude: string,
        },
        // add the rest of data types
        // ....
    } {
      return {
        myCoordinates: {
          longitude: "",
          latitude: ""
        },
        myAddress: {
          city: "",
          country: "",
          country_code: "",
          county: "",
          neighbourhood: "",
          postcode: "",
          road: "",
          state: ""
        },
        addressName: "",
        timeZone: "",
        currentTime: "",
        temperature: "",
        description: ""
      };
    },
});
</script>
...