Question

我只是编程的新手，并且已经尝试了几天Vue。

这里我想通过以下代码将用户的地理位置数据存储到Vuex状态。

    mounted () {
    navigator.geolocation.getCurrentPosition(foundLocation, noLocation)
    function foundLocation (position) {
      var userLoc = {
        Lon: position.coords.longitude,
        Lat: position.coords.latitude
      }
      console.log(userLoc)
      this.$store.dispatch('userLocSave', {lat: userLoc.Lat, lon: userLoc.Lon})
    }
    function noLocation () {
      console.log('No Location found!')
    }
  }

这里是store.js中的代码的国家

  state: {
    userLat: null,
    userLon: null
  }

突变

userLocation (state, locData) {
  state.userLat = locData.lat
  state.userLon = locData.lon
}

动作

userLocSave ({commit}, locData) {
  commit('userLocation', {
    lat: locData.lat,
    lon: locData.lon
  })
}

然而，它不像我想象的那样工作并显示此错误。

Uncaught TypeError: Cannot read property '$store' of null
at foundLocation

我试过搜索，但不知道关键字是什么，而且我已经坚持了一天这个问题了。所以，我决定在这里问一下。谢谢

Answer 1

这是范围问题：

this在上下文中，您使用它的范围是function()而不是vue实例。

对此进行排序的一种方法是使用arrow functions。箭头函数维护调用者的范围，因此在这种情况下，this仍将作用于vue实例。

mounted () {
    navigator.geolocation.getCurrentPosition(
    () => {
        var userLoc = {
            Lon: position.coords.longitude,
            Lat: position.coords.latitude
        }
        console.log(userLoc)
        this.$store.dispatch('userLocSave', {lat: userLoc.Lat, lon: userLoc.Lon})
    }, 
    () => { 
        console.log('No Location found!')
    })
}

未捕获的TypeError：无法读取null的属性'$ store'

1 个答案: