Laravel与所有视图共享数据那么我们如何在所有vue组件中管理此密钥?
我正在用Vue应用程序开发laravel。在laravel中,我使用View::share('key','value');所以我得到了所有刀片文件中的所有键值。但在vue组件中,我并没有为所有vue组件获取此密钥 最后,我解决了这个问题 首先,创建翻译服务提供商: 然后,您必须在blade模板中将翻译字符串传递给JS。我 在默认布局/app.blade.php文件中执行此操作: 最后一步是将该方法作为mixin包括在内: 就这样。现在,您可以在Vue组件中使用以下翻译:Laravel与所有视图共享数据那么我们如何在所有vue组件中管理此密钥?,laravel,vue.js,vuejs2,Laravel,Vue.js,Vuejs2,我正在用Vue应用程序开发laravel。在laravel中,我使用View::share('key','value');所以我得到了所有刀片文件中的所有键值。但在vue组件中,我并没有为所有vue组件获取此密钥 最后,我解决了这个问题 首先,创建翻译服务提供商: 然后,您必须在blade模板中将翻译字符串传递给JS。我 在默认布局/app.blade.php文件中执行此操作: 最后一步是将该方法作为mixin包括在内: 就这样。现在,您可以在Vue组件中使用以下翻译: {{{{('Examp
{{{{('Example Component')}}
{{{(“我是一个示例组件。”)}
导出默认值{
安装的(){
console.log(this.__u('Component mounted'))
}
}
最后,我解决了这个问题
首先,创建翻译服务提供商:
然后,您必须在blade模板中将翻译字符串传递给JS。我
在默认布局/app.blade.php文件中执行此操作:
最后一步是将该方法作为mixin包括在内:
就这样。现在,您可以在Vue组件中使用以下翻译:
{{{{('Example Component')}}
{{{(“我是一个示例组件。”)}
导出默认值{
安装的(){
console.log(this.__u('Component mounted'))
}
}
您需要确保将此作为属性传递。否则,您需要将其作为数据-
属性传递,并在装载前使用应用该值,但我需要全局传递,以便可以访问我的所有组件。您需要确保将其作为属性传递。否则,您需要将其作为数据-
属性传递,并使用beforeMount
自己应用该值,但我需要全局传递,以便可以访问所有组件。
<?php
namespace App\Providers;
use Illuminate\Support\Facades\App;
use Illuminate\Support\Facades\File;
use Illuminate\Support\Facades\Cache;
use Illuminate\Support\ServiceProvider;
class TranslationServiceProvider extends ServiceProvider
{
/**
* Bootstrap the application services.
*
* @return void
*/
public function boot()
{
Cache::rememberForever('translations', function () {
return collect([
'php' => $this->phpTranslations(),
'json' => $this->jsonTranslations(),
]);
});
}
private function phpTranslations()
{
$path = resource_path('lang/' . App::getLocale());
return collect(File::allFiles($path))->flatMap(function ($file) {
$key = ($translation = $file->getBasename('.php'));
return [$key => trans($translation)];
});
}
private function jsonTranslations()
{
$path = resource_path('lang/' . app()->getLocale() . '.json');
if (is_string($path) && is_readable($path)) {
return json_decode(file_get_contents($path), true);
}
return [];
}
}
'providers' => [
// your other providers
App\Providers\TranslationServiceProvider::class,
],
<script>
window._translations = {!! cache('translations') !!};
</script>
module.exports = {
methods: {
/**
* Translate the given key.
*/
__(key, replace) {
let translation, translationNotFound = true
try {
translation = key.split('.').reduce((t, i) => t[i] || null, window._translations.php)
if (translation) {
translationNotFound = false
}
} catch (e) {
translation = key
}
if (translationNotFound) {
translation = window._translations.json[key]
? window._translations.json[key]
: key
}
_.forEach(replace, (value, key) => {
translation = translation.replace(':' + key, value)
})
return translation
}
},
}
Vue.mixin(require('./trans'))
<template>
<div class="card">
<div class="card-header">{{ __('Example Component') }}</div>
<div class="card-body">
{{ __("I'm an example component.") }}
</div>
</div>
</template>
<script>
export default {
mounted() {
console.log(this.__('Component mounted.'))
}
}
</script>