Vue 2实例中使用外部变量的问题排查与解决

嘿，这个问题我之前在Laravel+Vue项目里也碰到过，给你几个靠谱的解决方案，帮你搞定部分页面有全局变量、部分页面没有的情况：

方案一：提前全局兜底赋值（最稳妥） #

在加载你的app.js之前，先在HTML里给这些变量设置默认值，再根据页面情况覆盖。这样不管页面有没有$property，这些变量都不会是undefined，Vue初始化时就不会报错。

修改你的视图代码：

<script>
// 先设置全局默认值
window.formSelectedCountry = null;
window.formSelectedDepartment = null;
window.formSelectedLocation = null;
window.formSelectedZone = null;

// 如果页面有$property变量，就覆盖默认值
@if(isset($property))
window.formSelectedCountry = {{ $property->country_id }};
window.formSelectedDepartment = {{ $property->department_id }};
window.formSelectedLocation = {{ $property->location_id }};
window.formSelectedZone = {{ $property->zone_id }};
@endif
</script>
<!-- 然后加载你的app.js -->
<script src="{{ asset('js/app.js') }}"></script>

然后Vue的data部分直接引用即可：

data: {
  // ...
  selectedCountry: window.formSelectedCountry,
  selectedDepartment: window.formSelectedDepartment,
  selectedLocation: window.formSelectedLocation,
  selectedZone: window.formSelectedZone,
  // ...
}

方案二：在Vue的data中做兜底判断 #

如果不想修改HTML里的代码，可以在Vue初始化时直接检查变量是否存在，不存在就用默认值。这里要注意用typeof检查避免ReferenceError，或者用ES6+的空值合并运算符：

方式1：typeof检查 #

data: {
  // ...
  selectedCountry: typeof formSelectedCountry !== 'undefined' ? formSelectedCountry : null,
  selectedDepartment: typeof formSelectedDepartment !== 'undefined' ? formSelectedDepartment : null,
  selectedLocation: typeof formSelectedLocation !== 'undefined' ? formSelectedLocation : null,
  selectedZone: typeof formSelectedZone !== 'undefined' ? formSelectedZone : null,
  // ...
}

方式2：空值合并运算符（更简洁） #

如果你的项目支持ES2020+（或者用Babel转译），可以用??运算符，它会在变量为null或undefined时返回默认值：

data: {
  // ...
  selectedCountry: window.formSelectedCountry ?? null,
  selectedDepartment: window.formSelectedDepartment ?? null,
  selectedLocation: window.formSelectedLocation ?? null,
  selectedZone: window.formSelectedZone ?? null,
  // ...
}

方案三：利用Laravel布局统一处理 #

如果你的页面都是基于同一个布局模板（比如layouts/app.blade.php），可以把变量初始化放到布局文件里，这样所有页面都会自动继承这些默认值，需要的页面只需传递$property即可：

在布局文件中添加：

<script>
// 用@json指令安全转换PHP变量为JSON格式，避免类型和引号问题
window.formSelectedCountry = @json(isset($property) ? $property->country_id : null);
window.formSelectedDepartment = @json(isset($property) ? $property->department_id : null);
window.formSelectedLocation = @json(isset($property) ? $property->location_id : null);
window.formSelectedZone = @json(isset($property) ? $property->zone_id : null);
</script>

这样你的子视图就不用再单独写这些变量的初始化代码了，Vue的data部分直接引用即可。

内容的提问来源于stack exchange，提问作者Maramal