Storybook 中的 Vuex 商店未定义答案

【问题标题】：Vuex store in Storybook undefinedStorybook 中的 Vuex 商店未定义
【发布时间】：2020-01-21 14:22:57
【问题描述】：

我的 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;
    }
}

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

为什么我的商店未定义？

【问题讨论】：

查看这篇文章是否有帮助：stackoverflow.com/questions/52482814/…
@AnuradhaKumari 这并不重要，因为我在任何地方都没有完整的 vue 应用程序，我只有一个使用 Storybook 开发的独立 vue 组件
你在哪里使用你的插件？即import plugin from 'main.js'; Vue.use(plugin)

标签： javascript vue.js vuex storybook

【解决方案1】：

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

【讨论】：