Laravel, InertiaJS, make translate from Database function gl

Question

我已经使这个辅助函数从数据库(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，我希望用它来做到这一点。

Answer 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';
}
}
}

app.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)
}
})

阅读更多信息:

https://vuejs.org/guide/reusability/plugins.html writing-a-plugin

在app.js laravel上创建全局方法值