NativeScript vue, vuex и urlhandler - PullRequest
Новая
       20

NativeScript vue, vuex и urlhandler

2 голосов
/ 29 мая 2019

Редактировать

Я использую https://github.com/hypery2k/nativescript-urlhandler, чтобы открыть глубокую ссылку в моем приложении - используя NativeScript vue и vuex.Похоже, что для получения доступа к методам, необходимым для маршрутизации [$navigateTo и т. Д.], Этот плагин должен быть настроен несколько иначе, чем примеры, приведенные в документации. 

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 должен быть вызванв Mounting - тогда вы можете проанализировать appURL и сослаться на страницу (компонент), к которой вы хотите перейти.Мне посоветовали не вызывать handleOpenURL изнутри маршрутизатора - но я не уверен почему, и он работает без ошибок - и у меня есть доступ к методам маршрутизации ... так что если кто-нибудь знает, если это плохая идея - пожалуйста, дайтея знаю :) Спасибо!

Весь материал, который я написал ранее, вероятно, запутал вещи - я ссылаюсь на компоненты в моем хранилище vuex, чтобы сделать их легко доступными из маршрутизатора.

Это основано на решении https://github.com/Spacarar - его можно найти здесь: https://github.com/geodav-tech/vue-nativescript-router-example. Это отличное решение, потому что вам не нужно включать каждый отдельный компонент в каждый компонентиспользовать в навигации - это дает почти vue роутер, как опыт.

Я использую https://github.com/hypery2k/nativescript-urlhandler, чтобы открыть глубокую ссылку в моем приложении - однако, у меня возникают проблемы с открытиемссылка.

В моем файле app.js у меня есть следующее: 

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 ... поэтому мне пришлось обращаться к vuex напрямую из метода handleOpenURL.Я создал действие специально для этого случая - openAppURL .. он делает то же самое, что и другие мои методы (хотя я его и консолидировал).

При нажатии на ссылку приложения я НЕ принимаюна страницу в приложении.Я поместил консольный журнал в openAppURL и вижу, что он вызывается, и возвращается правильный объект маршрута ... он просто не открывает страницу.SetTimeOut используется потому, что nextTick недоступен из vuex.

Я не знаю, как заставить страницу отображаться ... 

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....

1 Ответ

0 голосов
/ 30 мая 2019

Мне посоветовали опубликовать мои выводы в качестве ответа и пометить их как правильные.Чтобы использовать nativescript-urlhandler с vue, вы должны инициализировать обработчик из подключенного хука жизненного цикла vue.Пожалуйста, см. Выше для более подробной информации. 

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();
...