Как вызвать методы в Vue app $ refs.components или Vuex $ store из registerServiceWorker. js? - PullRequest
Новая
       9

Как вызвать методы в Vue app $ refs.components или Vuex $ store из registerServiceWorker. js?

2 голосов
/ 19 марта 2020

Я работаю над скаффолдом Vue PWA с Vue CLI, который по умолчанию использует пакет register-service-worker для представления методов жизненного цикла serviceWorker в registerServiceWorker.js: 

ready () {
  console.log(
    'App is being served from cache by a service worker.'
  )
},
registered () {
  console.log('Service worker has been registered.')
},
cached () {
  console.log('Content has been cached for offline use.')
},
updatefound () {
  console.log('New content is downloading.')
},
updated () {
  console.log('New content is available; please refresh.')
},
offline () {
  console.log('No internet connection found. App is running in offline mode.')
},
error (error) {
  console.error('Error during service worker registration:', error)
}

registerServiceWorker.js импортируется в main.js: 

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store/index'
import './registerServiceWorker'

Vue.config.productionTip = false

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

Вопрос в том, как получить доступ к области вызова методов в моем магазине Vuex $ или в приложении. vue $ refs.components из области действия registerServiceWorker.js, например 

updated () {
  // Something like
  this.$store.commit('showUpdateNotification')
  // OR
  this.$refs.updateNotification.show()
}

Я знаю, что для этого могу настроить дополнительные EventListeners в своем приложении, но, кажется, лучше использовать registerServiceWorker.js?

1 Ответ

0 голосов
/ 19 марта 2020

Импорт магазина Vuex в ваш файл registerServiceWorker.js.

ie. 

/* eslint-disable no-console */

import { register } from 'register-service-worker'
import appConfig from './app.config.json'
import store from './store'

if (process.env.NODE_ENV === 'production') {
  register(`${appConfig.router.baseUrl}service-worker.js`, {
    ready() {
      console.log(
        'App is being served from cache by a service worker.'
      )
    },
    cached() {
      console.log('Content has been cached for offline use.')
    },
    updated() {
      console.log('New content is available; please refresh.')
      store.commit('showUpdateNotification')
    },
    offline() {
      console.log(
        'No internet connection found. App is running in offline mode.'
      )
    },
    error(error) {
      console.error('Error during service worker registration:', error)
    },
  })
}
...