如何在不创建组件的情况下从 laravel 刀片视图文件扩展 app.js 方法/数据/手表

Posted 2023-02-23

【中文标题】如何在不创建组件的情况下从 laravel 刀片视图文件扩展 app.js 方法/数据/手表

【英文标题】：How to extend app.js methods/data/watch from laravel blade view file without creating components

【发布时间】：2020-07-25 00:59:53

【问题描述】：

我是 vue.js 的新手。

我的app.js 是：

import  store  from './store';
const app = new Vue(
    el: '#app',
    store,
    mounted()
        ...
    ,
    methods:
        ...
    
);

我正在使用 laravel，我不想每次都因为很小的原因创建组件。 如果不制作组件app.js 将充满方法，这些方法并非在每个页面中都有用。这就是为什么我想要一种从我的home.blade.php 文件中扩展app.js 的方法

@section(scripts)
    <script>
        ...
    </script>
@endsection

（不创建任何组件）。

或者，使用 *.blade.php

中的 <script> .. </script> 更新/添加 data: ... 和 methods: ...

【参考方案1】：

我找到了解决办法！

使用Mixin

在app.js之外创建mixin.js文件

例如

export var custom = 
  data: 
    show: true
  ,
  methods: 
    hide: function()
      this.show = false;
    
  ,
  watch: 
    ...
  ,

  ...

;

并且，在app.js 文件中：

import  store  from './store';
import  custom  from './mixin';  //Import mixin
window.app = new Vue(
    el: '#app',
    mixins: [custom],  // Add mixin var here
    store,
);

/*
  [note: for multiple: import custom1, custom2, ... and define [custom1, custom2, ...] ]
*/

更多详情：Official Documentation