如何根据特定的Vuex状态从Vue.js组件内部激活/停用Electron.js子菜单? [英] How to activate / deactivate an Electron.js submenu from inside a Vue.js Component according to a specific Vuex state?

问题描述

我在任何地方都找不到解决方案.

I can't find the solution to this anywhere.

我有一个已创建的示例vue-vuex-electron应用程序，我想根据vuex状态"isLogged"是true还是false来启用/禁用该应用程序的某些子菜单.我设法将其应用于导航路由器链接(使用v-if)，但尚未应用于菜单项...因为我不知道如何访问实际菜单(已在主过程中设置并呈现)).

I have this sample vue-vuex-electron app that I've created and I want to enable / disable some submenus of the app according to whether the vuex state 'isLogged' is true or false. I managed to apply that to the nav router-links (using v-if), but not yet to the menu items... 'cause I don't know how to access the actual Menu (already set and rendered at the main process).

例如，在我的Home.vue中，我想导入应用程序的Electron.Menu并设置以下内容:

For example, at my Home.vue, I'd like to import the Electron.Menu of the app and set the following:

created(){
    if(this.$store.getters.isLogged){
        mainMenu.getMenuItemById('login').enabled = false
        mainMenu.getMenuItemById('logout').enabled = true
        mainMenu.getMenuItemById('currentWeather').enabled = true
    } else{
        mainMenu.getMenuItemById('login').enabled = true
        mainMenu.getMenuItemById('logout').enabled = false
        mainMenu.getMenuItemById('currentWeather').enabled = false
    }
}

但是，当我尝试导入菜单时，它以未定义的形式返回，而不是已经创建并设置为应用程序的菜单.

But, when I try to import the Menu it's returned as undefined, not the menu already created and set to the app.

如何从VUE实例内部访问实际的电子菜单以进行更改?

HOW CAN I HAVE ACCESS TO THE ACTUAL ELECTRON MENU FROM INSIDE A VUE INSTANCE IN ORDER TO CHANGE IT ?

整个项目在这里: https://github.com/danielpm1982/open-weather-client

提前谢谢！:D

Daniel Pinheiro
danielpm1982.com
巴西

Daniel Pinheiro
danielpm1982.com
Brazil

推荐答案

好，没人知道这一点，所以我设法自己解决了这个问题……我正在分享解决方案以帮助他人.

OK, nobody knew this one, so I managed to work around it myself... and I'm sharing the solution to help others.

实际上，我找不到在Vue组件中通过渲染器过程获取或管理Electron Menu的方法，因此我让它可以在主要过程中进行更新，从而可以轻松访问所有Electron组件.

I actually could not find a way to get or manage the Electron Menu at the renderer process, from within the Vue components, so I let it to be updated at the main process itself, where I have access to all Electron components easily.

ipcMain.on('setMenuToLoggedInState', (e:Event, isLogged:boolean) => {
  const mainMenu: Menu = Menu.getApplicationMenu() as Menu
  if(isLogged){
    mainMenu.getMenuItemById('login').enabled = false
    mainMenu.getMenuItemById('logout').enabled = true
    mainMenu.getMenuItemById('currentWeather').enabled = true
  } else{
    mainMenu.getMenuItemById('login').enabled = true
    mainMenu.getMenuItemById('logout').enabled = false
    mainMenu.getMenuItemById('currentWeather').enabled = false
  }
});

然后，在渲染器端或Home.vue组件视图中，我只是向Vuex'isLogged'状态更改(即，当我希望它更新Vuex)时通知主进程一个事件以通知它.菜单.

Then, at the renderer side, or at the Home.vue component view, I simply emmit an event to the main process to notify it when the Vuex 'isLogged' state changes, that is, when I want it to update the Menu.

computed: {
  ...mapGetters(['isLogged'])
},
created(){
  if(this.isLogged){
    ipcRenderer.send('setMenuToLoggedInState', true)
  } else{
    ipcRenderer.send('setMenuToLoggedInState', false)
  }
}

在此应用中，登录和注销路径均重定向到主视图，因此Home Vue组件将始终能够在Vuex商店创建时检查"isLogged"状态，并且通知主进程根据该状态更新菜单或子菜单.

As, in the case of this app, both the Login as the Logout routes redirect to the Home View, the Home Vue component will always be able to check the 'isLogged' state at the Vuex store, on its creation, and notify the main process to update the Menu or subMenus according to that state.

我不知道是否有更好的方法，但是它可以这样工作.

I don't know if there's a better way for this, but it works this way.

我尽量避免使用ipcMain和ipcRenderer，因为没有将Vue组件代码与Electron API耦合，但是在这种情况下，我不得不使用它.

I was avoiding to use ipcMain and ipcRenderer as much as I could, for not coupling the Vue components code with the Electron API, but in this case I had to use it.

现在，我的菜单子菜单根据用户登录状态被激活和停用，并且导航栏的路由器链接是否根据相同的状态生成.

Now, my Menu submenus are activated and deactivated according to the user login state, as well as the router-links of the nav bar are generated or not according to that same state.

感谢所有可能试图回答这个问题的人.

Thanks to all those who might have tried to answer that.

整个项目在这里: https://github.com/danielpm1982/open-weather-客户

丹尼尔·皮涅罗(Daniel Pinheiro)
danielpm1982.com
巴西

Daniel Pinheiro
danielpm1982.com
Brazil

这篇关于如何根据特定的Vuex状态从Vue.js组件内部激活/停用Electron.js子菜单?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！