Question

我正在使用electron-vue样板，我想在VueX的每个Vue JS组件中使用Electron Webview API。

问题是Webview只能在初始化后访问，因此getTitle（）等方法是未定义的。

现在我的商店看起来像这样。

const state = {
  webview: null,
  homePageUrl: 'https://duckduckgo.com/?kac=0&kl=fr-fr&kp=1&kz=-1&kac=-1&k1=-1',
  canGoBack: false,
  canGoForward: false,
  loadInProgress: false
}

const mutations = {
  S_SET_WEBVIEW (state, webview) {
      state.webview = webview
  },
  S_LOAD_URL (state, url) {
    if(state.webview != null) {
      state.webview.loadURL(url)
    }
  },
  S_CAN_GO_BACK (state) {
    if(state.webview != null) {
      state.canGoBack = state.webview.canGoBack()
    }
  },
  S_CAN_GO_FORWARD (state) {
    if(state.webview != null) {
      state.canGoForward = state.webview.canGoForward()
    }
  },
  S_GO_BACK (state) {
    if(state.webview != null && state.canGoBack != false) {
      state.webview.goBack()
    }
  },
  S_GO_FORWARD (state) {
    if(state.webview != null && state.canGoForward != false) {
      state.webview.goForward()
    }
  },
  S_LOADING (state, bool) {
    state.loadInProgress = bool
  }
}

const actions = {
}

export default {
  state,
  mutations,
  actions
}

这就是我在我的商店中初始化变量webview（默认为null）的方式。

mounted() {
      let webview = document.getElementById('search-webview')
      this.$store.commit('S_SET_WEBVIEW', webview)

      // Can go back or forward (or disable btn)
      this.webview.addEventListener('did-navigate', () => {
        this.$store.commit('S_CAN_GO_BACK')
        this.$store.commit('S_CAN_GO_FORWARD')
      })

      // Enable loader (spinner)
      this.webview.addEventListener('did-start-loading', () => {
        this.$store.commit('S_LOADING',true)
      })

      // Disable loader (spinner)
      this.webview.addEventListener('did-stop-loading', () => {
        this.$store.commit('S_LOADING',false)
      })
    }

在我的其他组件中，我想获得当前页面的标题，返回等等....但它始终返回该方法未定义。

this.$store.state.webBrowser.webview.getTitle()

Answer 1

将Vue JS Lifecycle Diagram中的生命周期钩子mounted()更改为beforeUpdate()解决了未定义的错误。实现IoC的一种形式，其中组件使用元素更新商店关于它的状态将意味着引用保持在DOM内。

如何在Vue JS和Vue X中使用Electron Webview API？

1 个答案: