0

I am new to Laravel and tried to handle some api calls. I am making a dashboard with an admin panel to handle users. Now I want to add some data to my endpoint but every time I want to import a function from another view it says: Object(…) is not a function. I looked thorugh stackoverflow and found this post here but it didn´t solve my problem...

TypeError: Object(...) is not a function at resetStoreState (0.js:3252) at new Store (0.js:2993) at Module../resources/js/store.js (1.js:498) at webpack_require (app.js:64) at Module../resources/js/services/http_service.js (1.js:462) at webpack_require (app.js:64) at Module../resources/js/services/category_service.js (1.js:443) at webpack_require (app.js:64) at Module../node_modules/babel-loader/lib/index.js?!./node_modules/vue-loader/lib/index.js?!./resources/js/views/Categories.vue?vue&type=script&lang=js& (1.js:14) at webpack_require (app.js:64)

My code:

<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");
            }
        }
...

category_service

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'
        }
    });
}

and the store for reference

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: {}
});

Honestly I have no idea whats wrong here.

UPDATE:

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)
});
Preefix
  • 243
  • 2
  • 13

1 Answers1

1

fix this,it is problem with export default

in 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: {}
});

here export const store i have added

then in app.js

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

you need to change all of your export syntax

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'
        }
    });
}

and


import {http, httpFile} from './http_service';

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

ref link How can I export all functions from a file in JS?

Kamlesh Paul
  • 11,778
  • 2
  • 20
  • 33