Question

我的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：无法读取未定义的属性“ dispatch” 在VueComponent.newUploadRequest

为什么我的商店未定义？

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

故事书中的Vuex商店未定义

1 个答案:

Main.js