NativeScript vue, vuex 및 urlhandler

NativeScript vue, vuex 및 urlhandler

편집

NativeScript vue 및 vuex를 사용하여 앱 내에서 깊은 링크를 열기 위해 https://github.com/hypery2k/nativescript-urlhandler을 사용하고 있습니다.라우팅에 필요한 메서드를 입수하기 위해서는 []$navigateToetc] 이 플러그인은 문서의 예시와 약간 다르게 설정해야 합니다.

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

핸들 열기마운트된 상태에서 URL을 호출해야 합니다. 그러면 앱을 구문 분석할 수 있습니다.URL을 지정하고 탐색할 페이지(컴포넌트)를 참조합니다.handleOpen을 호출하지 말라는 지시를 받았습니다.라우터 내의 URL - 이유를 알 수 없으며 오류 없이 작동하며 라우팅 방법에 액세스할 수 있습니다.만약 이것이 나쁜 생각인지 아는 사람이 있다면 알려주세요:) 감사합니다!

아래에 기재한 내용은 모두 혼란스러울 수 있습니다.라우터에서 쉽게 사용할 수 있도록 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에 액세스해야 했습니다.URL 방식이 케이스에 대한 액션을 만들었습니다.open AppURL..다른 방법과 똑같이 동작합니다(단, 통합했습니다).

앱 링크를 클릭해도 앱 내 페이지로 이동하지 않습니다.openApp에 콘솔 로그를 저장했습니다.URL 이 호출되고 있음을 알 수 있으며 올바른 루트 객체가 반환됩니다.페이지가 열리지 않아요.설정 시간vuex 내에서 nextTick을 사용할 수 없기 때문에 out이 사용됩니다.

페이지를 어떻게 표시해야 할지 막막합니다.

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

저는 저의 조사 결과를 정답으로 게시하고 정답으로 표시하라는 조언을 받았습니다.nativescript-urhandler를 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();

언급URL : https://stackoverflow.com/questions/56365775/nativescript-vue-vuex-and-urlhandler