Storybook의 Vuex 저장소가 정의되지 않았습니다.

Storybook의 Vuex 저장소가 정의되지 않았습니다.

main.js는 다음과 같습니다.

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 컴포넌트는 다음과 같습니다.

<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>

제 이야기는 이렇습니다.

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

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

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

다음 오류가 나타납니다.

TypeError: VueComponent.newUploadRequest에 정의되지 않은 속성 'dispatch'를 읽을 수 없습니다.

내 스토어가 정의되지 않은 이유는 무엇입니까?

Vue.prototype.fileUploadStore = store;실행하지 않았기 때문에 수행되지 않음Vue.use(main.js module). 다음 코드를 사용할 수 있습니다.

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; // -----③

언급URL : https://stackoverflow.com/questions/58029837/vuex-store-in-storybook-undefined