Laravel中自定义laravel-file-manager的Vue前端并解决Vuex报错

你现在碰到的这堆Vuex报错，本质就是自己搭了个空壳Vuex Store，根本没把文件管理器需要的状态模块挂上去：

• 代码里写的new Vuex.Store()是没有任何配置的空实例，连一个mutation、action都没有
• 但文件管理器组件从初始化到跑起来的全流程，都是靠它自己源码里带的一套Vuex逻辑实现的——也就是报错里提到的那些fm/settings/xxx的mutation、fm/initializeApp的action，全是在它源码的store模块里定义的
• 空Store接不住这些带fm/前缀的调用，自然就报“找不到对应类型”的错。

不需要推翻之前的操作，只要调整下file_manager.js的引入逻辑就行，原来的复制源码路径、webpack编译规则、页面挂载方式都不用改：

1. 删掉错误的Vue.use(FileManager, {store})逻辑——你是直接把组件源码拷到本地二次开发，不是用安装好的npm包走插件流程，根本不需要用Vue.use注册插件，直接全局注册组件就行
2. 把你本地file-manager源码目录下的store模块引进来，挂到全局Vuex Store的modules配置里，必须保持命名空间是fm，和组件内部调用的前缀一致

修正后的file_manager.js代码参考：

import Vue from 'vue';
import Vuex from 'vuex';
// 引入本地源码里的文件管理器专属store
import fmStore from './file-manager/store';
import FileManager from './file-manager/FileManager.vue';

Vue.use(Vuex);

// 把文件管理器的store模块合并到全局Store
const store = new Vuex.Store({
    modules: {
        fm: fmStore
    }
});

// 全局注册组件
Vue.component('file-manager', FileManager);

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

• 命名空间绝对不能改，组件内部所有的dispatch、commit调用都是写死的fm/前缀，如果你挂store的时候换了别的名字，还是会报同样的找不到类型的错误
• 你现在webpack.mix.js里配的.js('resources/assets/js/file-manager.js', 'public/js')规则完全没问题，后续要自定义界面样式、修改组件结构，直接改本地resources/assets/js/file-manager目录下的文件就行，重新跑npm run dev就会生效
• 等Vuex的报错消了之后，如果碰到接口404、权限不足的问题，那是后端路由和配置的问题，和现在的前端引入逻辑没关系，按照文件管理器后端包的配置要求设置好接口权限和路由即可。

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