NativeScript vue，vuex和urlhandler [英] NativeScript vue, vuex and urlhandler

问题描述

编辑

我正在使用 https://github.com/hypery2k/nativescript-urlhandler 使用NativeScript vue和vuex在我的应用程序中打开深层链接.似乎为了获得进行路由[$navigateTo等]所需的方法，该插件的设置与docs中给出的示例稍有不同.

I'm using https://github.com/hypery2k/nativescript-urlhandler to open a deep link within my app - using NativeScript vue, and vuex. It seems that in order to get at the methods needed to do routing [$navigateTo etc] this plugin needs to be set up slightly differently from the examples given in docs.

import Vue from "nativescript-vue";
import Vuex from "vuex";
Vue.use(Vuex);

import { handleOpenURL } from 'nativescript-urlhandler';

new Vue({
    mounted() {
        handleOpenURL( (appURL) => {
            console.log(appURL)
            // Settings is the variable that equals the component - in this case settings.
            this.$navigateTo(Settings);
        });
    },
    render: h => h("frame", [h(Home)]),
    store: ccStore
}).$start();

handleOpenURL需要在Mounted中调用-然后您可以解析出appURL并引用您想要导航到的页面(组件).我被建议不要从路由器中调用handleOpenURL-但我不确定为什么，并且它没有错误-我可以访问路由方法...所以如果有人知道这是一个坏主意-请让我知道:)谢谢！

handleOpenURL needs to be called within Mounted - then you can parse out the appURL and reference the page (component) that you wish to navigate to. I have been advised against calling handleOpenURL from within router - but I'm not sure why, and it works without error - and I have access to the methods for routing... so if anyone knows if this is a bad idea - please let me know :) Thanks!

我之前写的所有下面的东西可能使事情感到困惑-我在vuex存储中引用组件，以使其可以从路由器轻松获得.

All the stuff below that I wrote before has probably confused things - I'm referencing components within my vuex store to make them easily available from the router.

这基于 https://github.com/Spacarar 的解决方案-可以找到此处: https://github.com/geodav-tech/vue-nativescript-路由器示例.这是一个很好的解决方案，因为您不必在导航中使用每个组件中都包含每个组件-它提供了几乎像路由器一样的体验.

This is based on a solution by https://github.com/Spacarar - it can be found here: https://github.com/geodav-tech/vue-nativescript-router-example. It's a great solution because you don't have to include every single component within each component to use in navigation - it gives an almost vue router like experience.

我正在使用 https://github.com/hypery2k/nativescript-urlhandler 在我的应用程序中打开深层链接-但是，打开链接时遇到问题.

I'm using https://github.com/hypery2k/nativescript-urlhandler to open a deep link within my app - however, I'm having problems opening the link.

在我的app.js文件中，我具有以下内容:

In my app.js file, I have the following:

import Vue from "nativescript-vue";
import Vuex from "vuex";
Vue.use(Vuex);
....
import { handleOpenURL } from 'nativescript-urlhandler';
import ccStore  from './store/store';


handleOpenURL(function(appURL) {
// I have hardwired 'Settings' in for testing purposes - but this would be the appURL
    ccStore.dispatch('openAppURL', 'Settings');
});

....

new Vue({
    render: h => h("frame", [h(Home)]),
    store: ccStore
}).$start();

我将路由状态存储在vuex中，并且具有多种有效的方法(单击链接可加载组件).但是，handleOpenURL存在于vue之外...因此，我不得不直接从handleOpenURL方法内部访问vuex.我已经为这种情况专门创建了一个操作-openAppURL ..它与我的其他方法完全一样(尽管我已经合并了它).

I'm storing the route state within vuex, and have various methods which work (clicking on a link loads the component). However, handleOpenURL exists outside of vue... so I've had to access vuex directly from within the handleOpenURL method. I've created an action specifically for this case - openAppURL.. it does exactly the same thing as my other methods (although I've consolidated it).

单击某个应用程序链接时，不会进入该应用程序内的页面.我在openAppURL中放置了一个控制台日志，可以看到它正在被调用，并且返回了正确的路由对象……它只是没有打开页面.之所以使用SetTimeOut，是因为vuex中无法使用nextTick.

When clicking on an app link, I am NOT taken to the page within the app. I have put a console log within openAppURL and can see it is being called, and the correct route object is returned... it just doesn't open the page. The SetTimeOut is used because nextTick isn't available from within vuex.

我对如何使页面显示不知所措...

I am at a loss on how to get the page to appear...

const ccStore = new Vuex.Store({
    state: {
        user: {
            authToken: null,
            refreshToken: null,
        },
        routes: [
            {
                name: "Home",
                component: Home
            },
            {
                name: "Log In",
                component: Login
            },
            ...
        ],
        currentRoute: {
            //INITIALIZE THIS WITH YOUR HOME PAGE
            name: "Home",
            component: Home //COMPONENT
        },
        history: [],
    },
    mutations: {
        navigateTo(state, newRoute, options) {
            state.history.push({
                route: newRoute,
                options
            });
       },
    },
    actions: {
        openAppURL({state, commit}, routeName ) {
            const URL =  state.routes[state.routes.map( (route) => {
                return route.name;
            }).indexOf(routeName)];

            return setTimeout(() => {
                commit('navigateTo', URL, { animated: false, clearHistory: true });
        }, 10000);
       },
       ....
     }
   etc....

推荐答案

已建议我将我的发现发布为答案并将其标记为正确.为了在vue中使用nativescript-urlhandler，您必须从vue的已安装生命周期挂钩中初始化处理程序.请参阅上面的详细信息.

I have been advised to post my findings as the answer and mark it as correct. In order to use nativescript-urlhandler with vue, you must initialise the handler from within vue's mounted life cycle hook. Please see above for greater detail.

import Vue from "nativescript-vue";
import Vuex from "vuex";
Vue.use(Vuex);

import Settings from "~/components/Settings";

import { handleOpenURL } from 'nativescript-urlhandler';

new Vue({
    mounted() {
        handleOpenURL( (appURL) => {
            console.log(appURL) // here you can get your appURL path etc and map it to a component... eg path === 'Settings. In this example I've just hardwired it in.
            this.$navigateTo(Settings);
        });
    },
    render: h => h("frame", [h(Home)]),
    store: ccStore
}).$start();

这篇关于NativeScript vue，vuex和urlhandler的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！