feat: add Vuex support

play/Storage-counter.vue

@@ -0,0 +1,27 @@
+<template>
+  <div>
+    <p>{{ count }}</p>
+    <p>
+      <button @click="increment">+</button>
+      <button @click="decrement">-</button>
+    </p>
+  </div>
+</template>
+
+<script>
+  export default {
+    computed: {
+      count () {
+        return this.$store.state.count
+      }
+    },
+    methods: {
+      increment () {
+        this.$store.commit('increment')
+      },
+      decrement () {
+        this.$store.commit('decrement')
+      }
+    }
+  }
+</script>

play/Storage.vue

@@ -0,0 +1,13 @@
+<template>
+  <p>This component is <span v-if="!enabled">not</span> using Vuex</p>
+</template>
+
+<script>
+  export default {
+    computed: {
+      enabled() {
+        return (this.$store.state.enabled === true && this.$store.getters.isAlive === true) ? true : false
+      }
+    }
+  }
+</script>

play/index.js

@@ -1,8 +1,12 @@
+import Vue from 'vue'
+import Vuex from 'vuex'
 import {configure} from '../src/play'
 
 import MyButton from './MyButton.vue'
 import Box from './Box.vue'
 
+Vue.use(Vuex)
+
 const load = requireContext => {
   return requireContext.keys().map(requireContext)
 }

play/storage.play.js

@@ -0,0 +1,33 @@
+import Vuex from 'vuex'
+import {play} from '../src/play'
+import Storage from './Storage.vue'
+import StorageCounter from './Storage-counter.vue'
+
+play('Storage', module)
+  .add('static', {
+    store: new Vuex.Store({
+      state: {
+        enabled: true
+      },
+      getters: {
+        isAlive: s => s.enabled
+      },
+    }),
+    render(h) {
+      return h(Storage)
+    }
+  })
+  .add('counter', {
+    store: new Vuex.Store({
+      state: {
+        count: 0
+      },
+      mutations: {
+        increment: state => state.count++,
+        decrement: state => state.count--
+      }
+    }),
+    render(h) {
+      return h(StorageCounter)
+    }
+  })

src/preview.js

@@ -1,6 +1,7 @@
 import Vue from 'vue'
 import qs from 'query-string'
 import findScenario from './utils/find-scenario'
+import filterVuex from './utils/filter-vuex'
 import {parseKey} from './utils/key-events'
 
 export default function ({spots, components}) {
@@ -35,6 +36,14 @@ export default function ({spots, components}) {
           const scenario = findScenario(spots, data.payload)
           if (scenario) {
             this.current = scenario.component
+
+            // Handle Vuex state if found
+            if (this.current.store && this.current.store.constructor.name === 'Store') {
+              this.$store = this.current.store // Swap the current store (including getters, actions and mutations)
+              if (this.current._initialState) { // If we have a cached initial state, use that
+                this.$store.replaceState(JSON.parse(this.current._initialState))
+              }
+            }
           }
         }
       })
@@ -46,10 +55,18 @@ export default function ({spots, components}) {
       }
       parent.postMessage({
         type: 'SET_SPOTS',
-        payload: JSON.stringify(spots)
+        payload: JSON.stringify(spots, filterVuex)
       }, location.origin)
     },
     render(h) {
+      if (this.current && this.current.store && this.current.store.constructor.name === 'Store') {
+        this.$store = this.current.store // Replace the current store
+        if (!this.current._initialState) { // Save original store state on the first render
+          this.current._initialState = JSON.stringify(this.$store.state)
+        }
+      } else {
+        this.$store = null // Remove the store, so it won't interfere, if it wasn't set
+      }
       return h('div', {attrs: {id: 'app'}}, [h(this.current)])
     }
   })

src/utils/filter-vuex.js

@@ -0,0 +1,8 @@
+// Replacer function for JSON.stringify to filter Vuex instance from the tree
+// https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify
+export default (key, value) => {
+  if (key === 'store' && value.constructor && value.constructor.name === 'Store') {
+    return undefined
+  }
+  return value
+}