Nativescript Vue 核心模块

Posted

技术标签:

【中文标题】Nativescript Vue 核心模块【英文标题】:Nativescript Vue Core Modules 【发布时间】:2019-11-02 05:56:47 【问题描述】:

我无法理解如何在 nativescript-vue 中使用框架模块。

例如这个模块,是我试图了解如何使用的: https://docs.nativescript.org/ns-framework-modules/platform

我需要在 App.js / Main.js 或我要使用的组件中声明吗?

我来自 Vue.js 的 Web 开发,我认为我尝试遵循的实现示例如下所示:

这是我认为与移动设备中的实现方式相同的网络示例。

如果我需要在网络上使用 Axios,我会将其导入 App.js / Main.js 以在应用程序中保持全局,或者将 SPF 导入以保持本地并能够调用所需的组件。

在移动端,如果我使用纯nativescript,导入是明确的,但在nativescript-vue中我无法理解如何使用它,我不知道它是否已经默认配置。

【问题讨论】:

【参考方案1】:

在代码中需要它们的地方导入模块,app.js 和 SPF。

app.js

import axios from "axios";
var platform = require("tns-core-modules/platform");

var instance = axios.create( baseURL: "https://myendpoint.com" );
if (platform.isandroid)  /* ... */ 

文件.vue

import axios from "axios";
var platform = require("tns-core-modules/platform");

export default 
    methods: 
        androidFunc() 
            if (platform.isIOS) 
                axios.get("https://website.com/api/ios") // ...
            
        
    

如果我需要全局的东西,我通常使用 Vue 实例属性 (Vue.prototype.$myProperty) 或 Vuex 存储。

【讨论】:

【参考方案2】:

您应该能够使用您在 Web 中使用的所有 CommonJS Vue 模块,这意味着它不应该对浏览器的特定功能有任何依赖。

您可能仍然可以使用 Axios,因为它在内部只使用 XMLHttpRequest,这是 NativeScript 环境中的有效全局对象。

如果你的 Vue 模块依赖于 html Dom / 文档 / 窗口 / 本地或会话存储等,那么它可能会失败。仅供参考,有像 nativescript-localstorage 这样的插件可以模拟本地/会话存储等功能。

【讨论】:

您可以像在 Vue on web 中一样使用 Axios。您必须安装 NPM 模块,将其导入并开始使用。如果你喜欢使用允许拦截器的 Vue Axious,你仍然可以像在 web.xml 中一样编写代码。您可以将Vue.use(VueAxios, axios) 放入您在网络上的条目文件中,以便所有组件都可以使用它。同样,您将把它放在app.js 上,我假设它是您项目的入口点,您将使用new Vue(...) 初始化您的第一个 UI 组件

以上是关于Nativescript Vue 核心模块的主要内容,如果未能解决你的问题,请参考以下文章

ImageCache Nativescript核心模块如何使用

如何在 vue 组件中实现 typescript 代码?

Nativescript-vue 监视道具

nativescript Vue中的指令和混合?

纯 NativeScript 迁移到 Angular 或 Vue

NativeScript Vue - VueX 不工作:无法读取未定义的属性获取器