无法从 Storybook 中的 Vuex 商店读取

Question

我正在使用带有 vue create 的 Storybook，我正在尝试从商店读取状态，但我收到以下错误：

Cannot read property 'state' of undefined
TypeError: Cannot read property 'state' of undefined
    at VueComponent.translations (http://localhost:6006/main.08c5b1c8a108e2d2d34c.bundle.js:161:26)
    at Watcher.get (http://localhost:6006/vendors~main.08c5b1c8a108e2d2d34c.bundle.js:86420:25)
    at Watcher.evaluate (http://localhost:6006/vendors~main.08c5b1c8a108e2d2d34c.bundle.js:86525:21)
    at VueComponent.computedGetter [as translations] (http://localhost:6006/vendors~main.08c5b1c8a108e2d2d34c.bundle.js:86775:17)
    at Object.get (http://localhost:6006/vendors~main.08c5b1c8a108e2d2d34c.bundle.js:84041:20)
    at Proxy.render (http://localhost:6006/main.08c5b1c8a108e2d2d34c.bundle.js:895:37)
    at VueComponent.Vue._render (http://localhost:6006/vendors~main.08c5b1c8a108e2d2d34c.bundle.js:85489:22)
    at VueComponent.updateComponent (http://localhost:6006/vendors~main.08c5b1c8a108e2d2d34c.bundle.js:86007:21)
    at Watcher.get (http://localhost:6006/vendors~main.08c5b1c8a108e2d2d34c.bundle.js:86420:25)
    at new Watcher (http://localhost:6006/vendors~main.08c5b1c8a108e2d2d34c.bundle.js:86409:12)

我的HotDescription 组件看起来像：

<template>
    <div class="hot-description">
        <SvgIcon iconId="icon-hot" class="icon-hot"/>
        <span>{{translations.ui.hotMessage}}</span>
    </div>
</template>

<script>

export default {
    name: 'HotDescription',
    computed: {
        translations() {
            return this.$store.state.translations
        }
    }
}
</script>

<style scoped lang="scss">

.hot-description {
    font-size: 14px;
    color: $hot-description-color;
    padding: 2%;
    border-top: 1px solid $hot-description-border-color;
    text-align: center;
}

.icon-hot {
    width: 14px;
    height: 14px;
    margin: 0 3px 3px;
}
</style>

在.storybook里面我有两个文件：

main.js:

const path = require('path');

module.exports = {
  stories: ['../stories/**/*.stories.js'],
  addons: ['@storybook/addon-actions', '@storybook/addon-links'],
  webpackFinal: async (config, { configType }) => {
    // `configType` has a value of 'DEVELOPMENT' or 'PRODUCTION'
    // You can change the configuration based on that.
    // 'PRODUCTION' is used when building the static version of storybook.

    // Make whatever fine-grained changes you need
    config.module.rules.push({
      test: /\.scss$/,
      use: ['style-loader', 'css-loader', 
        {
          loader: 'sass-loader',
          options: {
            prependData: `@import "src/project/betpawa/vars.scss"; @import "src/project/common/mixins.scss"; @import "src/styles/styles.scss";`
          }
        }
    ],
      include: path.resolve(__dirname, '../'),
    });

    // Return the altered config
    return config;
  },
};

还有preview.js:

import { configure } from '@storybook/vue';

import Vue from 'vue';
import Vuex from 'vuex';

// Import your global components.
import HotDescription from '../src/components/HotDescription.vue';

// Install Vue plugins.
Vue.use(Vuex);

// Register global components.
Vue.component('HotDescription', HotDescription);

configure(require.context('../stories', true, /\.stories\.js$/), module);

然后是故事 (stories/1-Button.stories.js)：

import Test from '../src/components/Test'
import HotDescription from '../src/components/HotDescription'

export default {
    title: 'Button',
    component: Test
}

export const C = () => ({
    components: { HotDescription },
    template: '<HotDescription />'
})

它安装在src/main.js:

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import Vuex from 'vuex'

import App from './App'
import router from './router'
import store from './store/store'
import './js/directives'
import './js/plugins'
import './js/globalComponents'
import './js/android'
import './js/filters'
import './js/polyfills'

Vue.config.productionTip = false
Vue.use(Vuex)

const app = new Vue({
    el: '#app',
    store,
    router,
    components: { App },
    template: '<App/>',
    mq: {
        isSmallest: '(max-width: 220px)',
        isVerySmall: '(max-width: 280px)',
        isXXSmall: '(max-width: 340px)',
        isXSmall: '(max-width: 380px)',
        isSmall: '(max-width: 767px)',
        isMedium: '(min-width: 768px)',
        isLarge: '(min-width: 980px)',
        isHighRes: '(-webkit-min-device-pixel-ratio: 2), (min-device-pixel-ratio: 2)' // , (min-resolution: 192dpi)
    }
})

export default app

任何想法我做错了什么？

Storybook 本身加载，组件在没有状态的情况下工作，这只是需要 vuex 的任何东西都不起作用......

Answer 1

编辑：浏览 Storybook 文档后，我看到 this：

您可能正在使用全局组件或 vue 插件，例如 vuex，在这种情况下，您需要在此 preview.js 文件中注册它们

他们的示例代码如下所示：

// Import Vue plugins
import Vuex from 'vuex';

// Install Vue plugins.
Vue.use(Vuex);

您在preview.js 中做过吗？ （请记住，我以前从未看过 Storybook，只是浏览文档。）

---

原答案

商店没有默认导出，因此导入语法不起作用。您可以获取命名的导出：

import { store } from './store'

或者您可以更改商店以使用默认导出：

export default new Vuex.Store({
  state: {
    count: 1
  },
})

Answer 2

仅供参考，我可以通过将以下内容添加到 preview.js 来完成这项工作：

import Vuex from 'vuex';
import Vue from 'vue'
import store from '../src/store/store'

Vue.use(Vuex);
Vue.prototype.$store = store;