Vue.js + WPなSPAで初回リクエスト数を減らす機構を作ってみた

1
function page_info( $request = null )
2
{
3
  $info = [
4
    'current'     => \"\",     // 現在ページ
5
    'the_id'      => \"\",     // スラッグから判定した投稿ID
6
    'is_home'     => false,  // ページタイプ
7
    'is_page'     => false,
8
    'is_single'   => false,
9
    'is_archive'  => false,
10
    'is_category' => false,
11
    'is_404'      => false,
12
    'meta'        => array(), //　スラッグから判定したメタ情報
13
    // ...その他、パンくずや、必要に応じて記事データなど
14
  ];
15

16
  // ...この辺りに、スラッグから判定したページ情報の取得処理を書きます
17

18
  return $info;
19
}

1
function my_theme_scripts()
2
{
3
  wp_enqueue_script( 'app', get_template_directory_uri() . '/path/to/app.js', array(), false, false );
4
  wp_localize_script( 'app', 'WP_INITIALIZE', page_info() );
5
}
6
add_action( 'wp_footer', 'my_theme_scripts' );

1
register_rest_route( 'wp/v2', '/page-info/(?P<slug>.*)', array(
2
  'methods' => 'GET',
3
  'callback' => 'api_for_page_info',
4
));
5

6
function api_for_page_info( WP_REST_Request $request )
7
{
8
  return rest_ensure_response( page_info( $request ) );
9
}

1
const stateObject = {
2
  data: {
3
    current: '',
4
    is_home: '',
5
    is_page: '',
6
    is_single: '',
7
    is_archive: '',
8
    is_category: '',
9
    is_404: '',
10
    the_id: '',
11
    meta: {
12
      title: '',
13
      ogp: {
14
        'description': '',
15
        'og:description': '',
16
        'og:title': '',
17
        'og:image': '',
18
        'og:site_name': '',
19
        'og:url': '',
20
        'twitter:title': '',
21
        'twitter:description': '',
22
        'twitter:url': '',
23
        'twitter:image': ''
24
      }
25
    }
26
  },
27
};
28

29
const getters = {
30
  getInfo: state => data => {
31
    return state.data;
32
  },
33
};
34

35
const mutations = {
36
  SAVE_INFO(state, data) {
37
    state.data = Object.assign(state.data, data)
38
  },
39
};
40

41
const actions = {
42
  async ['fetchInfo']({ commit, state }, slug) {
43

44
    const result = await api.fetchInfo(slug);
45
    commit('SAVE_INFO', result);
46
  },
47
};
48

49
export default {
50
  namespaced: true,
51
  state: stateObject,
52
  getters,
53
  mutations,
54
  actions,
55
};

1
...
2

3
async function beforeEachHandler(to, from, next) {
4

5
  // 初回アクセス時のみwindowのデータでStoreを同期
6
  if(WP_INITIALIZE) {
7
    store.commit('route/SAVE_INFO', Object.assign({}, WP_INITIALIZE));
8
    window.WP_INITIALIZE = undefined;
9
  }
10

11
  if(to.path !== from.path) {
12
    const pagePath = to.path.replace(/^\\//, '');
13
    await store.dispatch('route/fetchInfo', pagePath);
14
  }
15

16
  next();
17
}
18

19
const router = new VueRouter({
20
  mode: 'history',
21
  base: '/',
22
  routes,
23
  scrollBehavior: (to, from, savedPosition) => {
24
    return !savedPosition ? { x: 0, y: 0 } : savedPosition;
25
  },
26
})
27

28
router.beforeEach(beforeEachHandler);
29

30
export default router;