如何在Laravel中定制vue-filemanager前端？

Question

我正在使用包https://github.com/alexusmai/laravel-file-manager，它附带一个预编译的js文件，或者您可以直接通过https://github.com/alexusmai/vue-laravel-file-manager的npm使用vue组件。

然而，在这两个变体中，前端是不可更改的。我在我的应用程序中使用Laravel文件管理器，我想对vue文件进行定制，以更改前端。

到目前为止我尝试过的是：

• 将https://github.com/alexusmai/vue-laravel-file-manager/tree/master/src的内容复制到/resources/assets/js/file-manager中

然后我创建了这样一个file_manager.js：

import Vue from 'vue';
import Vuex from 'vuex';
import FileManager from './file-manager/FileManager.vue';

Vue.use(Vuex);

// create Vuex store, if you don't have it
const store = new Vuex.Store();

Vue.use(FileManager, {store});


Vue.component('file-manager', FileManager);


const app = new Vue({
    store
    el: '#app'
});

在我的webpack.mix.js文件中，我添加了以下一行：

.js('resources/assets/js/file-manager.js', 'public/js')

现在npm run dev可以工作了，但是如果我打开带有以下内容的页面：

<div style="height: 600px;">
    <div id="app">
        <file-manager></file-manager>
    </div>
</div>
<script src="{{ asset('js/file-manager.js') }}"></script>

我知道这个错误：

vuex未知突变类型:fm/ vuex /manualSettings vuex未知突变类型:fm/vuex/initAxiosSettings vuex未知操作类型: fm/initializeApp

为什么会发生这种事？我需要以不同的方式把它包括进去吗？

Answer 1

您需要导入和注册存储模块：

import Vue from 'vue';
import Vuex from 'vuex';
import FileManager from './file-manager/FileManager.vue';
import fm from './file-manager/store';  // Import modules

Vue.use(Vuex);

// create Vuex store, if you don't have it
const store = new Vuex.Store({modules: {fm}});  // Register modules

Vue.use(FileManager, {store});

Vue.component('file-manager', FileManager);

const app = new Vue({
    store,
    el: '#app'
});

解释

file-manager组件期望全局存储中存在大量的操作和突变。在典型的用法中，例如通过npm模块，在这入口点文件中定义的这些操作和突变将在存储这里上注册，如自述所述。由于您尝试手动注册file-manager组件，而不是由入口点文件注册它，所以您还需要显式地注册模块。

是的，作为替代解决方案，您可以从入口点文件init.js导入并将其用作插件，以便它隐式注册模块和组件：

import Vue from 'vue';
import Vuex from 'vuex';
import FileManager from './file-manager/init';  // Note 'init'

Vue.use(Vuex);

// create Vuex store, if you don't have it
const store = new Vuex.Store();

Vue.use(FileManager, {store});  // Registers the file-manager component too

const app = new Vue({
    store,
    el: '#app'
});