如何使用vuex-router-sync從路由模塊獲取密鑰

我有一個Vuex存儲（如下所示），我使用vuex-router-sync保持同步。這會將router模塊添加到我的商店中，但是如何將此對象從商店中取出，因爲這個模塊似乎沒有任何關聯的getter？如何使用vuex-router-sync從路由模塊獲取密鑰

店/ 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>

來源

2017-05-24 Dryden Williams

研究發現，工作得很好的解決方案。 vuex-router-sync觸發一個動作告訴我們路由已經改變。在我們現有的一個模塊中，您可以聽取這些信息並進行後續變更。對我來說，這將設置從router/ROUTE_CHANGED行動有效載荷的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>{{$route.name}}</h1>

這將使到：

<h1>Cheese</h1>

來源

2017-05-24 16:32:10

如何使用vuex-router-sync從路由模塊獲取密鑰

回答

相關問題