Как получить ключ из модуля маршрута с помощью vuex-router-sync

У меня есть небольшой магазин 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: {}
  }
}

По сути, я пытаюсь добавить заголовок в заголовок моего приложения, который обновляется в зависимости от того, на какой странице/представлении вы находитесь.

Заголовок.vue

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

Заголовок.html

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

javascript vue.js vuex vuejs2
person Dryden Williams    schedule 24.05.2017    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Нашел решение, которое работает достаточно хорошо. vuex-router-sync запускает действие, сообщающее нам, что маршрут изменился. В одном из наших существующих модулей вы можете прослушать это и сделать последующую мутацию. Для меня это будет установка title из полезной нагрузки действия router/ROUTE_CHANGED.

router.js

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

модуль1.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 в вашем компоненте следующим образом:

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

Что будет отображать:

<h1>Cheese</h1>
person Dryden Williams    schedule 24.05.2017