Laravel，Vue:对象(…)不是函数

Question

我是Laravel的新手，尝试过处理一些api调用。我正在制作一个带有管理面板的面板来处理用户。现在我想向我的端点添加一些数据，但每次我想从另一个视图导入函数时，它都会说：对象(…(不是函数。我仔细查看了stackoverflow，在这里找到了这个帖子，但它并没有解决我的问题。。。

TypeError:对象(…(不是函数在resetStoreState(0.js:3252(在新店(0.js:2993(在模块/resources/js/store.js(1.js:498(webpack_require(app.js:64(在模块/resources/js/services/http_service.js(1.js:462(webpack_require(app.js:64(在模块/resources/js/services/category_service.js(1.js:443(webpack_require(app.js:64(在模块/node_modules/babel-loader/lib/index.js/node_modules/vue loader/lib/index.js/resources/js/views/Categories.vue？vue&type=脚本&lang=js&(1.js:14(webpack_require(app.js:64(

我的代码：

<script>
//without the import here it works. as soon as I import it, it crashes
import * as createCategory from '../services/category_service';
...
methods: {
createCategory: async function() {
let formData = new FormData();
formData.append("name", this.categoryData.name);
formData.append("image", this.categoryData.image);
try {
//const response = await categoryService.createCategory(formData);
//console.log(response);
} catch (error) {
alert("error");
}
}
...

类别服务

import {http, httpFile} from './http_service';
export function createCategory(data) {
return httpFile().post('/categories', data);
}

http_service

import store from '../store';
import axios from 'axios';
export function http() {
return axios.create({
baseURL: store.state.apiURL
});
}
export function httpFile() {
return axios.create({
baseURL: store.state.apiURL,
headers: {
'Content-Type' : 'multipart/form-data'
}
});
}

和存储以供参考

import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
export default new Vuex.Store({
state: {
apiURL: 'http://localhost:8000/api',
serverPath: 'http://localhost:8000'
},
mutations: {},
actions: {}
});

老实说，我不知道这里出了什么问题。

---

更新：

app.js

import Vue from 'vue';
import App from './App.vue';
import router from './router';
import {store} from './store';
import 'bootstrap/dist/css/bootstrap.css';
import 'bootstrap';
import BootstrapVue from 'bootstrap-vue';
Vue.use(BootstrapVue);
new Vue({
el: '#app',
router,
store,
render: h => h(App)
});

Answer 1

修复此问题，它是export default的问题

在store.js 中

import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
export const store = new Vuex.Store({
state: {
apiURL: 'http://localhost:8000/api',
serverPath: 'http://localhost:8000'
},
mutations: {},
actions: {}
});

这里export const store我添加了

然后在app.js 中

import {store} from "./store";
import App from "./App.vue";
new Vue({
el: "#app",
router,
store // use here
});

---

您需要更改所有导出语法

import store from '../store';
import axios from 'axios';
export const  http =  function() {
return axios.create({
baseURL: store.state.apiURL
});
}
export const httpFile =  function() {
return axios.create({
baseURL: store.state.apiURL,
headers: {
'Content-Type' : 'multipart/form-data'
}
});
}

和

import {http, httpFile} from './http_service';
export const createCategory =  function(data) {
return httpFile().post('/categories', data);
}

ref链接如何从JS中的文件导出所有函数？