Here is a snippet from my main.js file:
import './plugins';
import store from './store';
import FileUpload from './components/FileUpload';
export default {
install(Vue) {
Vue.component('file-upload', FileUpload);
Vue.prototype.fileUploadStore = store;
}
}
This is how my FileUpload component is structured:
<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>
Additionally, here's an excerpt from my story file:
import FileUpload from '../resources/js/components/FileUpload';
export default {
title: 'Components',
component: FileUpload,
};
export const fileUpload = () => ({
components: { FileUpload },
template: '<file-upload/>'
});
But, I encountered the following error:
TypeError: Cannot read property 'dispatch' of undefined at VueComponent.newUploadRequest
I'm puzzled as to why my store object appears to be undefined. Any thoughts on this issue?