Improve Vue@1.x compat (vuejs#534)

Guillaume Chau · web-flow · commit c24a4e80cac3 · 2018-01-21T00:55:54.000+01:00
* Test app

* Fix data editing for Vue 1.x

* Vuex test case

* Fix for Vuex@1.x getters
diff --git a/src/backend/index.js b/src/backend/index.js
@@ -719,9 +719,13 @@ function setStateValue ({ id, path, value, newKey, remove }) {
       if (value) {
         parsedValue = parse(value, true)
       }
+      const api = isLegacy ? {
+        $set: hook.Vue.set,
+        $delete: hook.Vue.delete
+      } : instance
       set(instance._data, path, parsedValue, (obj, field, value) => {
-        (remove || newKey) && instance.$delete(obj, field)
-        !remove && instance.$set(obj, newKey || field, value)
+        (remove || newKey) && api.$delete(obj, field)
+        !remove && api.$set(obj, newKey || field, value)
       })
     } catch (e) {
       console.error(e)
diff --git a/src/backend/vuex.js b/src/backend/vuex.js
@@ -6,7 +6,7 @@ export function initVuexBackend (hook, bridge) {
 
   const getSnapshot = () => stringify({
     state: store.state,
-    getters: store.getters
+    getters: store.getters || {}
   })
 
   bridge.send('vuex:init', getSnapshot())
diff --git a/vue1-test.html b/vue1-test.html
@@ -0,0 +1,78 @@
+<html>
+<body>
+  <script src="https://unpkg.com/vue@1.0.28/dist/vue.js"></script>
+  <script src="https://unpkg.com/vuex@1.0.1/dist/vuex.js"></script>
+
+  <div id="app"></div>
+
+  <script>
+    const store = new Vuex.Store({
+      state: {
+        counter: 0
+      },
+      mutations: {
+        INCREMENT: state => state.counter++,
+        DECREMENT: state => state.counter--,
+        SET_COUNTER: (state, value) => state.counter = value
+      }
+    })
+
+    Vue.component('data-test', {
+      template: `<div>
+        {{ bool }} {{ text }} {{ number }}
+      </div>`,
+      data () {
+        return {
+          bool: false,
+          text: 'hello world',
+          number: 0
+        }
+      }
+    })
+
+    Vue.component('vuex-test', {
+      template: `<div>
+        <div>{{ counter }} {{ isMoreThanTwo }}</div>
+        <div>
+          <button @click="$store.dispatch('INCREMENT')">+1</button>
+          <button @click="$store.dispatch('DECREMENT')">-1</button>
+          <button @click="$store.dispatch('SET_COUNTER', 0)">Reset</button>
+        </div>
+      </div>`,
+      computed: {
+        counter () {
+          return this.$store.state.counter
+        }
+      },
+      vuex: {
+        getters: {
+          isMoreThanTwo: state => state.counter > 2
+        }
+      }
+    })
+
+    Vue.component('event-test', {
+      template: `<div>
+        <button @click="$emit('foo', 'bar')">Emit event</button>
+        <button @click="$dispatch('foo', 'meow')">Dispatch event</button>
+        <button @click="$broadcast('foo', 'waf')">Broadcast event</button>
+      </div>`
+    })
+
+    new Vue({
+      el: '#app',
+      store,
+      template: `<div id="app">
+        <data-test></data-test>
+        <vuex-test></vuex-test>
+        <event-test @foo="onFoo"></event-test>
+      </div>`,
+      methods: {
+        onFoo (value) {
+          console.log(value)
+        }
+      }
+    })
+  </script>
+</body>
+</html>
