几次导航后如何关闭原生脚本模式？

Posted 2023-04-13

【中文标题】几次导航后如何关闭原生脚本模式？

【英文标题】：How to close a nativescript modal after a few navigations?

【发布时间】：2020-02-08 15:09:00

【问题描述】：

打开了一个模式，它有多个页面。对于导航，我使用的是框架导航。每个页面上都有一个关闭按钮，点击它会关闭模式。

我现在正在做的是将this.$modal 作为属性传递给每个页面，这会创建一长串属性传递，并且在每个页面上我只执行this.modal.close() 其中this.modal 是引用组件的属性到第一页的this.$modal。

我想知道是否有更好的方法，例如访问最顶部的打开模式并关闭它。

我正在使用 nativescript-vue 和内置的 nativescript modals

请注意，我的应用程序的其他部分有多个模式。只有这个有导航。

【问题讨论】：

this.$modal 是否已经全局注册了对象？

@Dev.DY 没有。在每个模态的主要组件中。 this.$modal 存在。

您提出了一个通过注册 $modal 全局来使用的解决方案。请检查您的答案。

【参考方案1】：

一个小的改进可能是将模态保存到 Vuex 存储中，随时访问它而不是链接道具。

【讨论】：

我认为这是一种不好的气味，因为模态引用并不是真正的“状态”或数据。我认为它不属于 vuex。

不一定是数据，更多的是全局参考，如果你已经在使用 Vuex 可能是更好的选择。或者你可以使用 EventBus。

@Manoj 我听说 vuex 是全局状态的地方，而不是全局引用。

我的观点是，在此处存储引用并稍后清除它并没有什么坏处，而不是通过长的 props 链传递它。也可以选择 EventBus 来触发全局事件并处理关闭操作。

【参考方案2】：

通过插件分离模态组件。

const modalDialog = 
  install (Vue, options = ) 
     // ...
  


Vue.use(modalDialog)

为插件指定 Vue 原型。

const modalDialog = 
  install (Vue, options = ) 
     Vue.prototype.$modal = 
       show () 
         // ...
       ,
       hide () 
         // ..
       
     
  


Vue.use(modalDialog)

this.$modal 可从所有组件访问。

this.$modal.show() // or hide()

【讨论】：

尽管这个答案很好，但它并不完全适合 nativescript 模态的上下文。对不起，我想我应该在我的问题中更清楚地说明问题。我现在会的。