未捕获的类型错误：无法读取 null 的属性“$store”

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 实例。

对此进行排序的一种方法是使用箭头函数。箭头函数维护调用者的范围，因此在此实例中，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!')
    })
}