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

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

在我的其他组件中，我想获取当前页面的标题、返回等等....但总是returns该方法未定义。

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

Answer 1

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

内

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

How to use Electron Webview API with Vue JS and Vue X?

javascript

webview

vuejs2

electron

vuex