2

My main.js looks like this:

import './plugins';

import store from './store';

import FileUpload from './components/FileUpload';

export default {
    install(Vue) {
        Vue.component('file-upload', FileUpload);

        Vue.prototype.fileUploadStore = store;
    }
}

My FileUpload component looks like this:

<template>
    <div class="container">
        <form enctype="multipart/form-data">
            <h1>Upload files</h1>
            <div class="dropbox">
                <input type="file" name="file"/>
            </div>
        </form>
    </div>
</template>

<script>
    export default {
        name: 'file-upload',

        created() {
            this.newUploadRequest();
        },

        methods: {
            newUploadRequest() {
                return this.fileUploadStore.dispatch('fileupload/newUploadRequest');
            }
        }
    }
</script>

My story looks like this:

import FileUpload from '../resources/js/components/FileUpload';

export default {
  title: 'Components',
  component: FileUpload,
};

export const fileUpload = () => ({
  components: { FileUpload },
  template: '<file-upload/>'
});

And I get this error:

TypeError: Cannot read property 'dispatch' of undefined at VueComponent.newUploadRequest

Why is my store undefined?

Anuradha Kumari
  • 703
  • 5
  • 9
michael
  • 421
  • 6
  • 21
  • check this post in case it helps: https://stackoverflow.com/questions/52482814/cannot-read-property-dispatch-of-undefined-in-vuex?rq=1 – Anuradha Kumari Sep 20 '19 at 14:05
  • @AnuradhaKumari It's not realy relevant since I don't have a full vue app anywhere I just have a stand alone vue component that I am developing using Storybook – michael Sep 20 '19 at 14:13
  • Where are you _using_ your plugin? Ie `import plugin from 'main.js'; Vue.use(plugin)` – Phil Sep 24 '19 at 02:13

1 Answers1

1

Vue.prototype.fileUploadStore = store; not performed, because you didn't execute Vue.use(main.js module). You can try the following code:

Main.js

import Vue from 'vue'; // -----①
import './plugins';

import store from './store';

import FileUpload from './components/FileUpload';

Vue.component('file-upload', FileUpload); // -----②
Vue.prototype.fileUploadStore = store; // -----③
Duncan
  • 23
  • 7