vuex-router-syncを使用してルートモジュールからキーを取得する方法

Question

私は小さなVuexストアを持っています（以下のように）、私はvuex-router-syncを使って同期を保ちます。これにより、routerモジュールが私の店に追加されますが、このモジュールに関連するゲッターがないように、このオブジェクトを店舗からどのように取得するのですか？

店/ index.js

import Vue from 'vue' 
import Vuex from 'vuex' 

import module1 from './modules/module1' 
import module2 from './modules/module2' 
import module3 from './modules/module3' 

Vue.use(Vuex) 

export default new Vuex.Store({ 
    modules: { 
    module1, 
    module2, 
    module3 
    } 
}) 

main.js

import App from './views/App/App' 
import store from './store' 
import router from './router' 
import { sync } from 'vuex-router-sync' 

// sync router with store 
sync(store, router) 

new Vue({ 
    el: '#app', 
    store, 
    router, 
    render: h => h(App) 
}) 

私の状態は次のようになります。私は何をしようとしている。基本的

{ 
    module1: { 
    cheese: true 
    }, 
    module2: { 
    crackers: true 
    }, 
    module3: { 
    wine: true 
    }, 
    route: { 
    from: {} 
    fullPath:"/path/to/cheese" 
    hash:"" 
    meta: {} 
    name:"cheese" 
    params: {} 
    path:"/path/to/cheese" 
    query: {} 
    } 
} 

ですあなたのページ/ビューに応じて更新するタイトルを私のアプリのヘッダーに追加してください。

Header.vue

export default { 
    name: 'header', 
    computed: { 
    getRouteTitle() => { 
     return this.$store.getters.getRouteTitle 
    } 
    } 
} 

Header.html

<header> 
<h1>{{ getRouteTitle }}</h1> 
</header> 

Answer 1

は非常にうまく機能し解決策を見つけました。 vuex-router-syncは、ルートが変更されたことを通知するアクションを実行します。私たちの既存のモジュールの1つでは、これを聞き取り、その後の変異を起こすことができます。私にとっては、これはアクションペイロードからtitleに設定されます。

router.js理にかなっているし、よりよい解決策がある場合は私に知らせてください:)

*****

const router = [ 
    { 
    name: 'Cheese', 
    path: 'cheese', 
    component: Cheese, 
    meta: { title: 'Calendar', requiresAuth: true } 
    }, 
] 

module1.js

import * as types from '../mutation-types' 

// Initial State 
const state = { 
cheese: true, 
title: 'App' 
} 

// Getters 
export const getters = { 
    getRouteTitle: state => state.title 
} 

// Mutations 
export const mutations = { 
    'router/ROUTE_CHANGED' (state, payload) { 
    state.title = payload.to.meta.title 
    } 
} 

export default { 
    getters, 
    mutations, 
    state 
} 

・ホープ**アップデート*********

非常に簡単な方法は、あなたの共同で$routerインスタンスを取得することですこのようなmponent：

<h1>Cheese</h1> 

：にレンダリングします

<h1>{{$route.name}}</h1>