После обновления laravel-mix приложение больше не видит глобальные переменные - PullRequest
Новая
       8

После обновления laravel-mix приложение больше не видит глобальные переменные

0 голосов
/ 13 декабря 2018

Я обновляю проект с laravel-mix v2.0 до v4.0 и теперь вижу проблему, когда во время выполнения мои компоненты не могут видеть переменные в глобальном масштабе, как они это делали раньше.Как обновление инструмента сборки может повлиять на время выполнения?

Я вижу, что могу добавить свойства экземпляра к прототипу vue , но действительно ли мне нужен такой подход?Похоже, он все еще должен иметь возможность читать глобальные переменные, как это было раньше.

html 

<script type="text/javascript">
    var games = [
       // a bunch of objects
    ];
</script>
<script src="{{ mix('js/app.js') }}"></script>

app.js 

import ChannelSubscriptionSlider from './components/guild-subscriptions/ChannelSubscriptionSlider.vue';
Vue.component('channel-subscription-slider', ChannelSubscriptionSlider);

ChannelSubscriptionSlider.vue 

import Vue from 'vue';
import VueResource from 'vue-resource';
Vue.use(VueResource);
export default {
    data: function () {
        return {
            games: games, // undefined when used within this component, but used to work before upgrade
        }
    },

1 Ответ

0 голосов
/ 13 декабря 2018

Редактировать 2

Использовать `window.games, это" зарегистрирует "ваши переменные глобально.

Хотя, что я делаю, это следующееРассмотрим MPA, а не SPA:

В app.js я просто оставляю следующие строки: 

require('./bootstrap');

window.Vue = require('vue');

В отдельном файле, который я создал main.js, я помещаю этоНапример: 

import Sidebar from './components/layouts/Sidebar.vue'
import Topnav from './components/layouts/Topnav.vue'

new Vue({
  el: '#sidebar',
  render: h => h(Sidebar)
});

new Vue({
  el: '#topnav',
  render: h => h(Topnav)
});

в конце app.blade.php я положил: 

<script src="{{ asset('js/app.js') }}"></script>

<script type="text/javascript">
    const user_props = {
        fullName : {!! json_encode(Auth::user()->fullName) !!},
        username : {!! json_encode(Auth::user()->username) !!},
    }

    user_props.install = function(){
      Object.defineProperty(Vue.prototype, '$userProps', {
        get () { return user_props }
      })
    }

    Vue.use(user_props);
</script>

<script src="{{ asset('js/main.js') }}"></script>

Это работает, потому что я монтирую vue в app.js, но компоненты, которые используютuser_props загружаются после того, как я объявил и установил прототип ... Кроме того, поскольку vue смонтирован в app.js, я могу использовать Vue.use(user_props); после его загрузки ...

И забыл упомянуть об этом в веб-пакете.mix.js вы должны добавить main.js: 

 mix.js('resources/js/app.js',          'public/js')
    .sass('resources/sass/app.scss',    'public/css')

    .js('resources/js/main.js',        'public/js/')

Редактировать 1

На основе ваших комментариев и документов: https://vuejs.org/v2/cookbook/adding-instance-properties.html#The-Importance-of-Scoping-Instance-Properties

$ - это просто соглашение:

... Мы ограничиваем свойства экземпляра с помощью $, чтобы избежать этого.Вы даже можете использовать свое собственное соглашение, например, $ _appName или ΩappName, чтобы предотвратить даже конфликты с плагинами или будущими функциями.

Таким образом, вы можете настроить его как: 

Vue.prototype.games = games;

тогда вы можете получить к нему доступ на каждом компоненте как this.games

Как следует из документации, при этом вы должны быть осторожны, чтобы не перезаписать его.Поэтому, если вы объявили об этом в разделе данных ваших компонентов Vue, я думаю, вам следует удалить эти строки ...

...