Как определить глобальные переменные и глобальные функции в проекте vue

внешний интерфейс JavaScript Vue.js Vuex

Пишите впереди:

Например, в проекте часто необходимо повторно использовать некоторые функции и переменные, такие как адрес сервера веб-сайта, который получается из фона: токен входа пользователя, информация об адресе пользователя и т. д. В настоящее время необходимо Чтобы установить волну глобальных переменных и функцию глобальных переменных, эти две настройки не так уж сложны, и есть некоторые общие черты, некоторые друзья могут не знать об этом, поэтому просто напишите об этом и поделитесь ими. Друзья в беде могут сделать ссылку, если вам нравится, вы можете поставить лайк или обратить внимание, я надеюсь, что это может помочь всем.

Эта статья была впервые опубликована в моем личном блоге:obkoro1.com

определить глобальные переменные

принцип:

Настройте выделенный файл модуля глобальных переменных, определите начальное состояние некоторых переменных в модуле, выставьте его с экспортом по умолчанию, используйте Vue.prototype в main.js, чтобы смонтировать его в экземпляре vue или когда его нужно использовать в другом месте, импортировать модуль Вы можете.

Файл модуля глобальных переменных:

Файл Global.vue:

<script>
const serverSrc='www.baidu.com';
const token='12345678';
const hasEnter=false;
const userSite="中国钓鱼岛";
  export default
  {
    userSite,//用户地址
    token,//用户token身份
    serverSrc,//服务器地址
    hasEnter,//用户登录状态
  }
</script>

Использование 1:

Ссылка на файл модуля глобальной переменной, где это необходимо, а затем получить значение параметра глобальной переменной через имя переменной в файле.

Используйте в компоненте text1.vue:

<template>
    <div>{{ token }}</div>
</template>

<script>
import global_ from '../../components/Global'//引用模块进来
export default {
 name: 'text',
data () {
    return {
         token:global_.token,//将全局变量赋值到data里面，也可以直接使用global_.token
        }
    }
}
</script>
<style lang="scss" scoped>

</style>

Использование 2:

В файле main.js записи программы подключите указанный выше файл Global.vue к Vue.prototype.

    import global_ from './components/Global'//引用文件
    Vue.prototype.GLOBAL = global_//挂载到Vue实例上面

Затем во всем проекте вам не нужно обращаться к файлу модуля Global.vue, вы можете напрямую обращаться к глобальным переменным, определенным в файле Global, прямо через него.

text2.vue:

<template>
    <div>{{ token }}</div>
</template>

<script>
export default {
 name: 'text',
data () {
    return {
         token:this.GLOBAL.token,//直接通过this访问全局变量。
        }
    }
}
</script>
<style lang="scss" scoped>
</style>

Vuex также может устанавливать глобальные переменные:

Используйте vuex для хранения глобальных переменных.Тут много всего, и это относительно сложно.Заинтересованные друзья могут проверить информацию самостоятельно, кинуть волну,

определить глобальную функцию

принцип

Создайте новый файл модуля, а затем смонтируйте функцию в экземпляре Vue через Vue.prototype в main.js и запустите функцию через имя this.function.

1. Пишите функции прямо в main.js

Простые функции можно писать прямо в main.js

Vue.prototype.changeData = function (){//changeData是函数名
  alert('执行成功');
}

Вызывается в компоненте:

this.changeData();//直接通过this运行函数

2. Напишите файл модуля и смонтируйте его на main.js.

base.js, местоположение файла может быть размещено на том же уровне, что и main.js, для удобства.

exports.install = function (Vue, options) {
   Vue.prototype.text1 = function (){//全局函数1
    alert('执行成功1');
    };
    Vue.prototype.text2 = function (){//全局函数2
    alert('执行成功2');
    };
};

Входной файл main.js:

    import base from './base'//引用
    Vue.use(base);//将全局函数当做插件来进行注册

В вызове компонента:

    this.text1();
    this.text2();

позже

Выше показано, как определить содержимое глобальной переменной глобальной функции.Глобальная переменная глобальная функция здесь не может быть ограничена проектом vue.vue-cli использует веб-пакет для модуляризации.Другая модульная разработка, процедура определения глобальных переменных и функций в основном есть почти. Вышеупомянутое относится только к глобальным переменным и глобальным функциям.Я надеюсь, что чтение этой статьи немного поможет вам.

Наконец: Если вам нужно перепечатать, пожалуйста, поставьте ссылку на оригинальный текст и подпишите его. Кодировать не просто,благодарныйслужба поддержки! Я пишу статью с менталитетом биржевых записей, и не хочу ее рвать, но приветствую подсказки. Тогда я надеюсь, что друзья, которые прочитают это, кликнуткак, также можнообрати внимание наПроверить меня.
сайт блога and Персональная домашняя страница Nuggets

Выше 2017.10.23

Использованная литература:

Подробно объясните, как VUE определяет несколько реализаций глобальных переменных.
Как определить глобальные функции в Vue
Анализ исходного кода Vue.use
export default

Категории