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

Question

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

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

我将它存储在我的 vuex 状态 lang 在 nuxtInitServer 上。但我有两个问题。

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

其次，如何在我的插件中访问它？ 至于插件，我的解释如下：link to question

顺便说一句，有没有办法在 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);

Answer 1

1. 您无法在 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>

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

所以你不能只导入商店

import {store} from './store';

并使用它的值

store.getters.lang

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

更新 当然，您可以在自定义函数中使用 store getter、action 等，例如：

import Vue from "vue";

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

        }

更新 2 要在您的自定义验证消息中使用您的商店，您可以添加一个 mixin，您可以在 mount 钩子中添加您的验证。此时您可以访问您的 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 时都会调用此代码。所以我建议只在需要的页面中使用此验证。