Nuxt3实现多语言与事件总线(EventBus)_nuxt3 多语言

我的nuxt版本为 3.10.0

一、多语言实现

这里我使用得是 @nuxtjs/i18n 这个库

安装

npm install -D @nuxtjs/i18n@next
1

根目录创建 i18n.config.ts 文件

export default {
  legacy: false,
  locale: 'zh', // 默认值
  messages: {
      zh: {
        home: '首页',
        useKill: '使用技巧',
        helpCenter: '帮助中心'  
      },
      en: {
        home: 'Homepage',
        useKill: 'UseKill',
        helpCenter: 'helpCenter'
      }
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

在 nuxt.config.ts里面做配置

export default defineNuxtConfig({
...
i18n: {
    vueI18n: './i18n.config.ts'
  },
  ...
})
1
2
3
4
5
6
7

页面使用

<template>
<div>
 		<div class="menu">{{i18n.t('useKill')}}</div>
        <div class="menu" style="flex: 1;">{{i18n.t('helpCenter')}}</div>
</div>
</template>
<script setup lang="ts">
const i18n = useI18n();
</script>
1
2
3
4
5
6
7
8
9

语言切换

const handleLangChange = (val:string) => {
  console.log('val-->',val)
  i18n.locale.value = val;
}
1
2
3
4

二、事件总线

这里我是用得是 mitt 这个库,Mitt是一个微型的 EventEmitter 库

安装

npm install mitt --save
1

在plugins文件夹下建立mitt.ts文件

import mitt from 'mitt';
import { defineNuxtPlugin } from '#app'

export default defineNuxtPlugin(() => {
  return {
    provide: {
      mitt: mitt()
    }
  }
})
1
2
3
4
5
6
7
8
9
10

使用：
A页面

const { $mitt } = useNuxtApp();
 $mitt.emit('pullRefresh')
1
2

B页面

onMounted(() => {
  console.log('onMounted-->')
  $mitt.on('pullRefresh', () => {
    console.log('pullRefresh-->')
  })
})
onBeforeUnmount(() => {
  console.log('卸载了')
  $mitt.off('pullRefresh')
})
1
2
3
4
5
6
7
8
9
10
11