Use with Vuex

[michaelmior]

How can I inject a Vuex store for use with components I'm testing? I see vue-play itself uses Vuex so I'm not sure how to make use of Vuex myself without vue-play interfering.

[egoist]

the manager page uses vuex but the preview(iframe) does not, your component does not really affect vue-play, it's independent from the app interface.

./src/preview.js is the actual file loading your component.

[egoist]

Currently you can import your vuex store and use it directly, but the mapState... helpers would not work. since it requires your to bind store to Vue instance

// ./play/index.js
import {play} from 'vue-play'
import MyButton from './components/MyButton.vue'
import store from './store'

play('Button', module)
  .add('with text', h => h(MyButton, {on: {click: () => store.commit('HELLO')}}, 'hello'))

[michaelmior]

That was my question really, whether it's possible to bind the store to the Vue instance since I want to be able to use this.$store.

[egoist]

Maybe It could be done with play('Button', module, {store}) so that we bind the store when we create the Vue instance, I'm just not sure if there's any more elegant solution for now.

[michaelmior]

@egoist Thanks for the suggestion. I'm new to Vue so I'm still figuring out how all this stuff works :) I'll update if I come up with anything useful.

[JackuB]

Hey, I was thinking about it, and for me it seems that the most natural implementation would be to be able to initialize vuex for each scenario like this:

play('some component', module)
.add('state with accessGranted', {
  store: {
    state: {
      accessGranted: true,
    },
  },
  render: (h) => {
    return h(syncStart);
  },
});

I think we would only need to add support for Vuex in https://github.com/vue-play/vue-play/blob/master/src/preview.js - can prepare a PR

Currently I'm just mocking relevant data stores and vuex for each component like so:

play('Prepare commit message', module)
.add('default view', {
  store: {
    state: {
      repo: 'org/reponame',
      filePath: 'filename.yaml',
      branch: 'master',
      repolist,
      user: { avatar: 'https://avatars.githubusercontent.com/u/0?v=3' },
    },
    getters: {
      accounts: uniqBy(repolist.map(_ => _.owner), 'login'),
    },
    commit(action, data) {
      if (action === 'setAccount') {
        this.state.selectedAccount = data;
      }
    },
    dispatch() {
      return new Promise((resolve) => {
        setTimeout(() => resolve(), 2000);
      });
    },
  },
  render: (h) => {
    return h(syncStart);
  },
});

[egoist]

@JackuB looks good

[michaelmior]

@JackuB Looks good to me too. Would love to see this integrated :)