Using window.store when creating a story

Describe the bug When creating a story I am trying to use the window.store as the store (I include a script in preview-head.html which sets up window.store so it does exist in the iframe).

Basically I am working on a site that uses decoupled vue components built as libraries which communicate data through a global vuex store on the window, unfortunately this prevents mapActions working with storybook because the context of this.$store is wrong.

I have tried the following based of this issue and also this post:

storiesOf("Some component", module)
    .add("using global store", () => ({
        components: {
            ModuleName
        },
        template: "<module-name />",
        store: window.store
    }));

Unfortunately the context of window is wrong at this point, I also tried setting up the store in the config file with Vue.use(Vuex) but because I register the modules dynamically I couldn’t get this to work either as I register them against window.store when the module is loaded with the following script:

export default async (identifier, storeModule) => {
    const store = window.store;
    const exists = store.state[identifier];
    if (!window.components.registeredModules.includes(identifier)) {
        storeModule.namespaced = true;
        store.registerModule(identifier, storeModule, {
            preserveState: exists
        });
        window.components.registeredModules.push(identifier);
    }
};

To Reproduce Steps to reproduce the behavior:

1. Try to use store: window.store when creating a story.
2. Serve storybook.
3. See context is wrong.

Expected behavior To be able to reference objects on the iframe window.

System:

• OS: Ubuntu 18.10
• Device: Desktop
• Browser: Chrome
• Framework: Vue
• Version: 5.0.11

Additional context I am building the decoupled components as outlined here.

[backbone87]

you could try the following decorator:

function waitForStore() {
  return () => ({
    data() {
      return { store: null };
    },
    async created() {
      this.store = await GET_WINDOW_STORE();
    },
    render(h) {
      if(!this.store) {
        return h('span', 'Waiting for store...');
      }

      return h('story', { store: this.store }); // this may not work, then try the following
      return h({ components: { story: this.$options.components.story }, template: '<story></story>', store: this.store });
    }
  })
}

storiesOf(...).addDecorator(waitForStore()).add(...);

[chopfitzroy]

Hey @anipendakur,

No there is currently no new issue as I have not had time to revisit this, feel free to open a new issue and reference this one.

Cheers!