Настройка динамического заголовка ActionBar с помощью NuxtJS (VueJS) и проблемы мутации <keep-alive/>


Настройка динамического заголовка ActionBar с помощью NuxtJS (VueJS) и проблемы мутации &lt;keep-alive/&gt;

11.08.2020 12:11:28 Просмотров 1 Источник

Обычно с VueCLI3я устанавливал динамические заголовки для ActionBar (например, Vuetify) со свойствами vue-router meta (вроде статических, так как они настроены в файле router.js)

Пример:

// router.js

const routes = [
    {
      path: '/',
      name: 'Home',
      component: Home,
      meta : {
        title : 'Welcome Home',
      }
    },
]
// in App.vue 
<template>
  <v-app>
    <ActionBar :title="$route.meta.title"></ActionBar>
    <router-view></router-view> 
  </v-app>
</template>

С Nuxt.JS, я все равно не смог бы найти, чтобы установить route-meta, поэтому я использовал Vuex.store getter и mutations для установки заголовков в магазине и выборки в основном макете.

Пример:

// in mainLayout.vue
<template>
  <v-app dark> 
    <v-app-bar app color="primary" dark>
      <v-toolbar-title v-text="actionTitle" />
    </v-app-bar>

    <v-main>
      <v-container>
        <nuxt keep-alive />
      </v-container>
    </v-main>

  </v-app>
</template>

<script>
export default {
  computed: {
    ...mapGetters([
      'actionTitle'
    ])
  },
}
vue-router meta0

Проблема возникает, когда я использую vue-router meta1 или использую кэшированные компоненты. Это кэширование не фиксирует эти мутации, поэтому заголовок панели действий остается статичным для последнего заголовка.

Какой метод должен быть подходящим для динамической настройки заголовка?

У вопроса есть решение - Посмотреть?

Ответы - Настройка динамического заголовка ActionBar с помощью NuxtJS (VueJS) и проблемы мутации &lt;keep-alive/&gt; / Setting up dynamic ActionBar Title using NuxtJS (VueJS) and <keep-alive/> mutation problem

Является ответом!
Jalal Uddin

08.09.2020 09:19:57

Решение, которое я нашел в reddit, заключается в использовании метода activated. Пример:

export default {
  activated() {
    this.$store.commit('setActionTitle', 'Medical Service BD')
  },
}
Помочь в развитии проекта:
Закрыть X