使用 NuxtJS (VueJS) 和 <keep-alive/> 突变问题设置动态 ActionBar 标题答案

【问题标题】：Setting up dynamic ActionBar Title using NuxtJS (VueJS) and <keep-alive/> mutation problem使用 NuxtJS (VueJS) 和 <keep-alive/> 突变问题设置动态 ActionBar 标题
【发布时间】：2020-08-11 09:11:28
【问题描述】：

通常，使用 VueCLI3，我曾经使用 vue-router meta 属性为 ActionBar（例如 Vuetify）设置动态标题（有点静态，因为它们在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'
    ])
  },
}

// in some routed page, eg: index.vue
export default {
  created() {
    this.$store.commit('setActionTitle', 'Medical Service BD')
  },
}

当我使用 <nuxt keep-alive /> 或使用缓存组件时会出现问题。这种缓存不会提交这些突变，因此操作栏标题保持上一个标题的静态。

哪种方法适合动态标题设置？

【问题讨论】：

标签： javascript vue.js nuxt.js

【解决方案1】：

我从reddit 找到的解决方案是使用activated 方法。示例：

export default {
  activated() {
    this.$store.commit('setActionTitle', 'Medical Service BD')
  },
}

【讨论】：