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

Question

我是 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:{... }

Answer 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, ...] ]
*/

更多细节：官方文档