vueのコンポーネントメソッド内の非同期処理の改善

Question

Vueにおいて、クリックアクションで現在の位置情報を取得して文字列としてStoreに格納するコードを記述しました。しかし、非同期に処理が走っているため、dispatcher内に送られる引数がundefinedとなってしまいます。参考までに即時関数の記述のままでこの問題を解決する記述方法がありますでしょうか？アドバイスをいただきたく思います。

また、そもそもVueではこのような記述をしないほうがよろしいのでしょうか？
（例えば、現在地を取得してStateとして持ったCurrentPosition.vueを別コンポーネントとして作成し、クリックアクションによりこのコンポーネントを生成する書き方にしたほうがいいかとも思いましたがどうなのでしょうか？）

以下コードです。

<template>
  <div class='InputCurrentPosition'>
    <v-layout row wrap>
      <v-form ref='form' v-on:submit.prevent='addpos()'>
        <v-btn v-on:click.prevent='addpos()' color='success' dark>Submit</v-btn>
      </v-form>
    </v-layout>
  </div>
</template>

<script>
export default {
  name: 'InputCurrentPosition',
  data () {
    return {
    }
  },
  methods: {
    addpos: function () {
      let pos = {}
      if (navigator.geolocation) {
        pos = navigator.geolocation.getCurrentPosition(
          function (position) {
            let coords = position.coords
            let latitude = coords.latitude
            let longitude = coords.longitude
            let pos = {lat: latitude, lng: longitude}
            console.log(pos)
            return pos
          },
          function (error) {
            alert('Error')
            print(error)
          }
        )
      } else {
        // error handling
      }
      this.$store.dispatch('PosAdd', String(pos))
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.input{
  width: 130pt;
  height:30pt;
}
.button {
  display: block;
  position: relative;
  margin: 0 auto;
  width: 70pt;
  border: solid 1px silver;
  border-radius: 0.5rem 0.5rem;
  padding: 0.5rem 1.5rem;
  margin-top: 1rem;
  text-decoration: none;
}
</style>

Answer 1

promiseとasync/awaitで行けないすかね？（以下のコードは試せてない、ごめんなさい。やってみて。）

  methods: {
    addpos: async function() {
      let pos = {};
      if (navigator.geolocation) {
        pos = await new Promise((res, rej) => {
          navigator.geolocation.getCurrentPosition(
            position => {
              let coords = position.coords;
              let latitude = coords.latitude;
              let longitude = coords.longitude;
              let pos = { lat: latitude, lng: longitude };
              console.log(pos);
              res(pos);
            },
            error => {
              alert("Error");
              print(error);
              rej(error);
            }
          );
        });
      } else {
        // error handling
      }
      this.$store.dispatch("PosAdd", String(pos));
    }
  }

getCurrentPositionがコールバック受ける形になってるので、即時的には書けないかも。