我正在将一个项目从laravel-mix v2.0升级到v4.0,现在看到一个问题,在运行时我的组件无法像以前那样看到全局范围的变量。升级构建工具如何影响运行时间?
我知道我可以添加instance properties to the vue prototype,但这真的是我需要采取的方法吗?似乎它应该仍然能够像以前一样读取全局变量。
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
}
},
答案 0 :(得分:0)
编辑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>
之所以可行,是因为我在app.js中安装了vue,但是在声明并安装了原型后才加载了使用user_props
的组件。此外,由于vue已安装在app.js中,因此我可以使用{{ 1}}加载后...
忘了提到在webpack.mix.js中,您应该添加main.js:
Vue.use(user_props);
编辑1
mix.js('resources/js/app.js', 'public/js')
.sass('resources/sass/app.scss', 'public/css')
.js('resources/js/main.js', 'public/js/')
只是一个约定:
...我们用$限制实例属性以避免这种情况。如果您愿意,甚至可以使用自己的约定(例如$ _appName或ΩappName)来防止与插件或将来的功能发生冲突。
因此请记住,您可以将其设置为:
$
然后您就可以在每个组件上以Vue.prototype.games = games;
的身份访问它
正如文档所暗示的那样,在执行此操作时,请务必不要覆盖它。因此,如果您在Vue组件的数据部分声明了它,我认为您应该删除这些行...