Skip to content
This repository has been archived by the owner on Jun 9, 2019. It is now read-only.

Vuex support #46

Closed
wants to merge 2 commits into from
Closed

Vuex support #46

wants to merge 2 commits into from

Conversation

JackuB
Copy link

@JackuB JackuB commented Jan 26, 2017

Vuex in Vue Play

This PR adds a Vuex support and resolves #41

  • It detects Vuex storage on a component object
  • Cache its initial state value and applies it on each new render

I'd like to get some tests written before merging - tried to add some tests, but couldn't get vbuild test to work.

@JackuB JackuB changed the title WIP: Vuex support Vuex support Jan 28, 2017
@zephraph
Copy link
Collaborator

zephraph commented Feb 1, 2017

@JackuB so this is ready? I'll try to figure out what up with the tests. Definitely should add those regardless.

@JackuB
Copy link
Author

JackuB commented Feb 2, 2017

@zephraph yea, functionality is there. I want to give another try for the tests over the weekend.

@JackuB
Copy link
Author

JackuB commented Feb 4, 2017

Added tests for preview. I followed this issue egoist/poi#37

I don't think they will pass on CI tho, because I can't get --single-run option to do anything because of how Object.assign is used for extending karmaConfig - I think I will create a PR with lodash.defaultsDeep to solve it.

  Preview
    Basics
      ✔ exports a function
      ✔ returns a Vue instance
    With spots defined
      Without a store
        ✔ will set a current component
      With a store
        ✔ will set a current component
        ✔ will expose a store instance
        ✔ will create an _initialState property with stringified state
        ✔ allows for state to be changed
        ✔ changes the state
        ✔ accepts the post message
        ✔ changes the state to the initial value
    Without location.search set
      ✔ will not set a current component
    Without spots
      ✔ will not set a current component

Finished in 0.154 secs / 0.029 secs @ 16:40:42 GMT+0100 (CET)

@JackuB
Copy link
Author

JackuB commented Feb 4, 2017

@egoist may I suggest https://github.com/semantic-release/semantic-release for vbuild and vue-play? It simplifies deploying, takes care of changelog and correct semantic versioning (I'm on a holy crusade to make everyone using it 😄)

@appinteractive
Copy link

Hey Whats the state on that feature? Its really reeded :)

@JackuB
Copy link
Author

JackuB commented Feb 23, 2017

@egoist @appinteractive Rebased, updated the example a bit - good to go (I have a test file stashed if we get around implementing karma to vue-play). I've been using this branch in production for some time.

@zephraph
Copy link
Collaborator

Sweet, thanks.

@zephraph zephraph requested a review from egoist February 23, 2017 18:02
}, location.origin)
},
render(h) {
// Save original store state on the first render
if (get(this.current, 'store.constructor.name') === 'Store' && !this.current._initialState) {
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hmm, why do we need to cache this?

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The way I envision Vuex in vue-play is that you get you app/component to a certain state, defined in Vuex state.

So if I have a scenario Popup opened and my state is set to popupVisible: true and I close the popup in UI, thus setting state to popupVisible: false I want to see the original state when I open that scenario again.

@egoist
Copy link
Collaborator

egoist commented Feb 25, 2017

It's a bit weird to create store instance for every component, what about using (namespaced) store module?

// btw, it seems I can't push to your branch 😅

@egoist
Copy link
Collaborator

egoist commented Feb 25, 2017

I just published a patch which fixed the JSON.stringify(spots) error, so now you can bind Vuex store like this:

Before calling play(), register Vuex as plugin

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)

Bind store instance to your component:

import Vuex from 'vuex'

play('button')
  .add('with text', {
    store: new Vuex.Store({state: {count: 0}}),
    template: '<button>{{$store.state.count}}</button>'
  })

@anfinil
Copy link
Contributor

anfinil commented Mar 10, 2017

@egoist do you plan to release Vuex support soon? Thanks.

@egoist
Copy link
Collaborator

egoist commented Mar 10, 2017

@anfinil check out the comment above, it's already supported

@anfinil
Copy link
Contributor

anfinil commented Mar 10, 2017

@egoist Sorry for misunderstanding, I wanted to ask when PR will be merged to master?

@egoist
Copy link
Collaborator

egoist commented Mar 10, 2017

@anfinil why functionality is missing in current version of vue-play?

@JackuB I'm closing this for now. Thanks anyway.

@egoist egoist closed this Mar 10, 2017
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Use with Vuex
5 participants