如何使用NUXT.js访问Mounted（）方法中的存储？

Question

我正在使用Open Street Map进行我的NUXT.js项目，并且想通过store方法访问mounted()。我收到错误消息，指出未在mounted()方法名称空间中定义存储。我该如何访问？

@ / assets / js / utils.js

const utils = {

//...

updateMap(context) {
    let _context = context;

    const checkMapObject = setInterval(() => {
      if (_context.$refs.map) {
        _context.map = _context.$refs.map.mapObject;
        clearInterval(checkMapObject);

        //console.log(_context.map);

        if (process.browser) {
          L = require('leaflet');
          console.log("MAP OBJECT INITED");

          delete L.Icon.Default.prototype._getIconUrl;

          L.Icon.Default.mergeOptions({
            iconRetinaUrl: require('leaflet/dist/images/marker-icon-2x.png'),
            iconUrl: require('leaflet/dist/images/marker-icon.png'),
            shadowUrl: require('leaflet/dist/images/marker-shadow.png'),
          });

          for (let marker of this.getMapMarkers(_context.store.state.pollingStations)) {
            L.marker(marker).addTo(_context.map)
          }
        }
      }
    }, 100);
  },

// ...

}

export default utils;

index.vue

<template>
   ...
</template>

<script>

...

import utils from '@/assets/js/utils'

export default {
  // ...

  mounted() {
    utils.updateMap(this)
  },

  // ...
}
</script>

我已经收到此错误：

Uncaught TypeError: Cannot read property 'state' of undefined

Answer 1

1. 首先，您将能够从Mounted（）中的Vue组件实例中读取内容。例如

mounted() {
  this.$store;
}

1. 但是问题是这。在mounted()被调用时，不能保证$ store是可用的。

虽然我仍在解决问题，但我调试并注意到this.$store并非立即可用，但将在mounted的某个时间后可用。

到目前为止，我还没有找到正式的文档来描述Vuex在生命周期中准备就绪的时间。但是我认为fetch及其状态看起来很有希望。我会尝试向您报告。