Laravel，InertiaJS，从数据库函数全局翻译答案

【问题标题】：Laravel, InertiaJS, make translate from Database function globallyLaravel，InertiaJS，从数据库函数全局翻译
【发布时间】：2022-12-05 08:25:17
【问题描述】：

我已经制作了这个辅助函数来从数据库 (MySQL) 中翻译适当的列。数据库是这样的。

 Id     name_en     name_fr    name_de
 1      Car         Auto       Auto
 2      Plane       Avion      Ebene

我的辅助功能是这样的..

import { Inertia } from "@inertiajs/inertia";

export default function translate(array, column) {

    let locale = Inertia.page.props.locale;
    let value = array[column + '_' + locale];

    return value ?? 'Missing Translation';

}

在我的组件中，我这样调用这个函数并且它工作正常。

<script setup>
import translate from "@/Helpers/translateFromDb";

defineProps({
  object: {
    type: Object,
  },
});
</script>

<template>
  <ul class="flex justify-start space-x-6">
    <li v-for="item in object" :key="item.id">
      {{ translate(item, "name") }}
    </li>
  </ul>
</template>

<style scoped>
</style>

有没有办法全局导入这个辅助函数而不是在每个组件上调用它？

编辑：是的，我知道通过在 ObjectResource 中使用 Trait 可以获得相同的结果，但我正在学习 Vue，并且我希望用它来做到这一点。

【问题讨论】：

标签： javascript laravel localization vuejs3 inertiajs

【解决方案1】：

您可以编写一个插件，然后使用该插件启动您的应用程序。

助手/translateFromDb.js：

import { Inertia } from "@inertiajs/inertia";

export default{

    install: (app, options) => {

        app.config.globalProperties.translate = (array, column) => {

            let locale = Inertia.page.props.locale;
            let value = array[column + '_' + locale];

            return value ?? 'Missing Translation';

        }

    }

}

应用程序.js：

import translateFromDb from "./Helpers/translateFromDb";

createInertiaApp({
  resolve: name => require(`./Pages/${name}`),
  setup({ el, App, props, plugin }) {
    Vue.use(plugin)
    Vue.use(translateFromDb) // inject plugin here
    new Vue({
      render: h => h(App, props),
    }).$mount(el)
  }
})

Create global method vue on app.js laravel

【讨论】：