如何在Nuxt中定义全局变量以在任何地方访问

debugcn 发表于 Dev

Mojtaba Barari

当我开始扩展我的应用程序时，我发现了一个大问题！！我正在开发没有的多语言双向应用程序i18n。基本上我有一个像下面这样的语言json文件：

{
  "fa":{
    "dir": "rtl",
    // ....
  },
  "en":{
    "dir": "ltr",
    //....
  }
}

我将其以我的vuex状态存储在nuxtInitServerlang上。但是我有两个问题。

首先，如何在我的scss文件中访问它以更改字体系列？

第二，如何在我的插件中访问它？至于插件，这是我的解释：链接到问题

顺便说一句，有什么方法可以在nuxt中定义一个全局变量，以便在任何地方都可以访问，并且当然可以更改（不是像env这样的静态变量）。例如，当我更改语言时，能够访问.js和.scss文件中的当前语言。

这里的更新是我需要访问存储的实际插件代码：

import Vue from 'vue'
import { required, email , alpha , alpha_spaces , numeric , confirmed } from 'vee-validate/dist/rules'
import { extend, ValidationObserver, ValidationProvider, setInteractionMode } from 'vee-validate'
import { store } from 'vuex'

Vue.prototype.$something= function (){
    let lang = store.state.lang
}

setInteractionMode('eager')

extend('required', {
    ...required,
    message: `{_field_} ${$lang.error_required}` // this is were i'm gonna use my vuex state
})
extend('email', email)
extend('alpha', alpha)
extend('numeric', numeric)
extend('alpha_spaces', alpha_spaces)
extend('confirmed', confirmed)
extend("decimal", {
    validate: (value, { decimals = '*', separator = '.' } = {}) => {
        if (value === null || value === undefined || value === '') {
            return {
                valid: false
            };
        }
        if (Number(decimals) === 0) {
            return {
                valid: /^-?\d*$/.test(value),
            };
        }
        const regexPart = decimals === '*' ? '+' : `{1,${decimals}}`;
        const regex = new RegExp(`^[-+]?\\d*(\\${separator}\\d${regexPart})?([eE]{1}[-]?\\d+)?$`);

        return {
            valid: regex.test(value),
        };
    },
    message: '{_field_} ' + ''
})
Vue.component('ValidationProvider', ValidationProvider);
Vue.component("ValidationObserver", ValidationObserver);

托斯滕·科尔布

您无法在Scss代码中访问javascript变量。但是，您可以为每个语言环境定义一个Css类，然后将正确的类设置为在布局文件中具有计算属性的主div。

<template>
  <div :class="containerLangClass">
    <nuxt />
  </div>
</template>
<script>
export default {
  computed: {
    containerLangClass() {
      return "container-" + this.$store.getters.lang;
    }
  }
};
</script>

<style lang="scss">
.container-fa {
  font-family: "Franklin Gothic Medium", "Arial Narrow", Arial, sans-serif;
}
.container-en {
  font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif;
}
</style>

您可以在插件中导入vuex存储，并在自定义方法，指令和co中使用它。但是我认为您想在创建插件之前访问存储值。

所以你不能只导入商店

import {store} from './store';

并使用其值，例如

store.getters.lang

因为此时存储尚未初始化。

更新当然，您可以在自定义函数中使用商店吸气剂，动作等，例如：

import Vue from "vue";

Vue.prototype.$something = function (){
            
let lang = this.$store.getters.lang; //...etc

        }

更新2要在自定义验证消息中使用商店，您可以添加一个mixin，在其中将验证添加到已挂接的挂钩中。此时，您可以访问vuex商店。

插件代码：

import Vue from "vue";
import { extend } from "vee-validate";
import { required } from "vee-validate/dist/rules";

Vue.mixin({
  mounted() {
    extend("required", {
      ...required,
      message: fieldName => {
        return `${fieldName} ${this.$store.getters.$lang.error_required}`;
      }
    });
  }
});

请注意，每次调用mount时都会调用此代码。因此，我建议您仅在需要的页面中使用此验证。

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。