javascript - 如何在 Laravel 中自定义 vue-filemanager 前端?
问题描述
我正在使用包https://github.com/alexusmai/laravel-file-manager,它带有预编译的 js 文件,或者您可以直接通过来自https://github.com/的 npm 使用 vue-component alexusmai/vue-laravel-file-manager。
但是,在这两种变体中,前端都是不可修改的。我在我的应用程序中使用 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/settings/manualSettings [vuex] 未知突变类型:fm/settings/initAxiosSettings [vuex] 未知动作类型:fm/initializeApp
为什么会这样?我需要以不同的方式包含它吗?
解决方案
您需要导入和注册存储模块:
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'
});
推荐阅读
- c++ - 通过跳过可选参数填充参数包
- python - 如何使用 os.remove() 删除所有电子邮件文件?通过电子邮件发送到 TFS 票
- aurelia - Aurelia Kendo Grid - 搜索栏不显示
- python - python上下文协议:为什么__enter__和__exit__方法不能在对象中定义?
- math - 不能让数学随机在两个不同的地方工作
- .net-core - 经管理员同意的 MS-Graph 读取任务
- java - 解析字符串的递归方式
- c# - C#中子项的嵌套foreach
- elixir - 如何将请求参数填充到 Plug.Conn 连接中?
- r - 使用 lapply 在数据框中填充 NA 值