초기 vue.js/vue-router 로드 시 모든 서버 측 데이터를 로드하는 방법

초기 vue.js/vue-router 로드 시 모든 서버 측 데이터를 로드하는 방법

저는 현재 WordPress REST API와 vue-router를 사용하여 작은 한 페이지 사이트의 페이지를 전환하고 있습니다.단, REST API를 사용하여 서버에 AJAX 콜을 발신하면 데이터가 로드되지만 페이지가 이미 렌더링된 후에만 데이터가 로드됩니다.

vue-router 문서는 각 경로로 이동하기 전후의 데이터 로드 방법에 대한 통찰력을 제공하지만 초기 페이지 로드 시 모든 경로 및 페이지 데이터를 로드하는 방법을 알고 싶기 때문에 경로가 활성화될 때마다 데이터를 로드할 필요가 없습니다.

참고: 데이터를 로딩하고 있습니다.acf액세스 할 수 있습니다..vue파일 컴포넌트 사용this.$parent.acfs.

main.js 라우터 코드:

const router = new VueRouter({
    routes: [
        { path: '/', component: Home },
        { path: '/about', component: About },
        { path: '/tickets', component: Tickets },
        { path: '/sponsors', component: Sponsors },
    ],
    hashbang: false
});

exports.router = router;

const app = new Vue({
    router,
    data: {
        acfs: ''
    },
    created() {
        $.ajax({
            url: 'http://localhost/placeholder/wp-json/acf/v2/page/2',
            type: 'GET',
            success: function(response) {
                console.log(response);
                this.acfs = response.acf;
                // this.backgroundImage = response.acf.background_image.url
            }.bind(this)
        })
    }
}).$mount('#app')

Home.vue 컴포넌트 코드:

export default {
    name: 'about',
    data () {
        return {
            acf: this.$parent.acfs,
        } 
    },
}

좋은 생각 있어요?

저의 접근 방식은 AJAX 콜이 돌아올 때까지 스토어와 메인 Vue의 건설을 지연시키는 것입니다.

store.displaces를 설정합니다.

import Vue from 'vue';
import Vuex from 'vuex';
import actions from './actions';
import getters from './getters';
import mutations from './mutations';

Vue.use(Vuex);

function builder(data) {
  return new Vuex.Store({
    state: {
      exams: data,
    },
    actions,
    getters,
    mutations,
  });
}

export default builder;

main.discloss.main.discloss.

import Vue from 'vue';
import VueResource from 'vue-resource';
import App from './App';
import router from './router';
import store from './store';

Vue.config.productionTip = false;

Vue.use(VueResource);

Vue.http.options.root = 'https://miguelmartinez.com/api/';

Vue.http.get('data')
  .then(response => response.json())
  .then((data) => {
    /* eslint-disable no-new */
    new Vue({
      el: '#app',
      router,
      store: store(data),
      template: '<App/>',
      components: { App },
    });
  });

저는 이 접근방식을 Angular 및 ExtJs와 같은 다른 프레임워크와 함께 사용해 왔습니다.

네비게이션 가드를 사용할 수 있습니다.

특정 컴포넌트에서는 다음과 같습니다.

export default {
    beforeRouteEnter (to, from, next) {
        // my ajax call
    }
};

모든 컴포넌트에 네비게이션가드를 추가할 수도 있습니다.

router.beforeEach((to, from, next) => {
    // my ajax call
});

주의할 점은 내비게이션가드는 비동기이기 때문에next()데이터 로딩이 완료되면 콜백합니다.내 앱의 실제 예(가드 기능이 별도의 파일에 있음):

export default function(to, from, next) {
    Promise.all([
        IngredientTypes.init(),
        Units.init(),
        MashTypes.init()
    ]).then(() => {
        next();
    });
};

당신 같은 경우에는 전화해야 할 필요가 있습니다.next()에서success물론 콜백이죠.

저는 이 게시물에 대한 모든 좋은 반응을 바탕으로 저만의 버전을 구성했습니다.몇 년이 지났고 더 많은 도구를 내게 주기도 했다.

main.js에서는 비동기/대기 기능을 사용하여 프리페치서비스를 호출하여 기동 시에 필요한 데이터를 로드합니다.가독성이 높아집니다.데이터 통신을 받은 후 beforeCreate() 후크에 있는 적절한 vuex 스토어 모듈에 디스패치합니다.

import Vue from 'vue';
import App from './App.vue';
import router from './router';
import store from './store';

import { prefetchAppData } from '@/services/prefetch.service';

(async () => {
    let comms = await prefetchAppData();

    new Vue({
        router,
        store,
        beforeCreate() {
            store.dispatch('communityModule/initialize', comms);
        },
        mounted() {},
        render: h => h(App)
    }).$mount('#app');
})();

당신이 선호하는 것을 조심하라고 그들에게 경고해야 할 것 같아요.초기 앱 로딩이 지연되므로 이 작업은 신중하게 수행하도록 하십시오. 이는 사용자 환경에 적합하지 않습니다.

여기 데이터를 로드하는 샘플 prefetch.service.js가 있습니다.물론 이건 좀 더 정교할 수 있어요.

import api from '@api/community.api';
export async function prefetchAppData() {
    return await api.getCommunities();
}

심플한 vue 스토어.이 스토어는 응용 프로그램을 시작하기 전에 로드해야 하는 '커뮤니티' 목록을 유지합니다.

community.store.module (vuex 모듈을 사용하는 것에 주의해 주세요.

export const communityModule = {
    namespaced: true,
    state: {
        communities: []
    },
    getters: {
        communities(state) {
            return state.communities;
        },
    },
    mutations: {
        SET_COMMUNITIES(state, communities) {
            state.communities = communities;
        }
    },
    actions: {
        // instead of loading data here, it is passed in 
        initialize({ commit }, comms) {
            commit('SET_COMMUNITIES', comms);
        }
    }
};

내가은, 「」내의 입니다.main.js 및 과 같이 할당합니다.

main.discloss.main.discloss.

let acfData;

$.ajax({
    async: false,
    url: 'http://localhost/placeholder/wp-json/acf/v2/page/2',
    type: 'GET',
    success: function(response) {
        console.log(response.acf);
        acfData = response.acf;
    }.bind(this)
})  

const router = new VueRouter({
    routes: [
        { path: '/', component: Home },
        { path: '/about', component: About },
        { path: '/tickets', component: Tickets },
        { path: '/sponsors', component: Sponsors },
    ],
    hashbang: false
});

exports.router = router;

const app = new Vue({
    router,
    data: {
        acfs: acfData 
    },
    created() {

    }
}).$mount('#app')

할 수 ..vue다음과 같이 합니다.

export default {
    name: 'app',
    data () {
    return {
        acf: this.$parent.acfs,
    }
},

마지막으로 동일한 데이터 내에서 렌더링합니다..vue츠키다

<template>
  <transition
      name="home"
      v-on:enter="enter"
      v-on:leave="leave"
      v-bind:css="false"
      mode="out-in"
    >
    <div class="full-height-container background-image home" v-bind:style="{backgroundImage: 'url(' + this.acf.home_background_image.url + ')'}">
      <div class="content-container">
        <h1 class="white bold home-title">{{ acf.home_title }}</h1>
        <h2 class="white home-subtitle">{{ acf.home_subtitle }}</h2>
        <div class="button-block">
          <a href="#/about"><button class="white home-button-1">{{ acf.link_title_1 }}</button></a>
          <a href="#/tickets"><button class="white home-button-2">{{ acf.link_title_2 }}</button></a>
        </div>
      </div>
    </div>
  </transition>
</template>

할 은, 가 ACF 를 할 마다, ACF 데이터는 「ONCE」라고 하는 것입니다.beforeRouteEnter (to, from, next)그 결과, 원하는 대로 매끄러운 페이지 전환을 할 수 있습니다.

이것이 누구든 같은 문제를 마주치는 사람에게 도움이 되기를 바란다.

Vue Router 문서에서 이 섹션을 확인하십시오.

https://router.vuejs.org/guide/advanced/data-fetching.html

따라서 먼저 엔드포인트에서 데이터를 가져오는 방법을 쓴 다음 워처를 사용하여 경로를 감시해야 합니다.

export default {
    watch: {
        '$route': 'fetchItems'
    },
    methods: {
        fetchItems() {
          // fetch logic
        }
    }
}

WP Rest API로 작업하고 있으니 Github https://github.com/bedakb/vuewp/blob/master/public/app/themes/vuewp/app/views/PostView.vue#L39에서 제 레포 확인 부탁드립니다.

언급URL : https://stackoverflow.com/questions/41572974/how-to-load-all-server-side-data-on-initial-vue-js-vue-router-load