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

最新推荐文章于 2024-06-08 09:30:49 发布

拾荒李

最新推荐文章于 2024-06-08 09:30:49 发布

阅读量811

点赞数 7

文章标签： vue javascript

本文链接：https://blog.csdn.net/woyebuzhidao321/article/details/136257654

版权

我的nuxt版本为 3.10.0

一、多语言实现

这里我使用得是 @nuxtjs/i18n 这个库
在这里插入图片描述

安装

npm install -D @nuxtjs/i18n@next

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

export default {
  legacy: false,
  locale: 'zh', // 默认值
  messages: {
      zh: {
        home: '首页',
        useKill: '使用技巧',
        helpCenter: '帮助中心'  
      },
      en: {
        home: 'Homepage',
        useKill: 'UseKill',
        helpCenter: 'helpCenter'
      }
  }
}

在 nuxt.config.ts里面做配置

export default defineNuxtConfig({
...
i18n: {
    vueI18n: './i18n.config.ts'
  },
  ...
})

页面使用

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

语言切换

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

在这里插入图片描述

二、事件总线

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

安装

npm install mitt --save

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

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

export default defineNuxtPlugin(() => {
  return {
    provide: {
      mitt: mitt()
    }
  }
})

使用：
A页面

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

B页面


onMounted(() => {
  console.log('onMounted-->')
  $mitt.on('pullRefresh', () => {
    console.log('pullRefresh-->')
  })
})
onBeforeUnmount(() => {
  console.log('卸载了')
  $mitt.off('pullRefresh')
})