Question

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

2018-01-27

6912

javascript vue.js vuex

我只是一个编程新手，刚刚尝试了 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

  state: {
    userLat: null,
    userLon: null
  }

Mutation

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

Action

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!')
    })
}