general option component (canvas size)

src/components/MenuGeneralOptions.vue

@@ -9,7 +9,8 @@
           id="canvasWidth"
           name="canvasWidth"
           type="number"
-          value="1280"
+          :value="canvasWidth"
+          @input="updateCanvasWidth"
         >
       </div>
       <div class="form-field">
@@ -17,15 +18,8 @@
           id="canvasHeight"
           name="canvasHeight"
           type="number"
-          value="1024"
-        >
-      </div>
-      <div class="form-field">
-        <input
-          id="canvasRefresh"
-          type="button"
-          name="canvasRefresh"
-          value="refresh"
+          :value="canvasHeight"
+          @input="updateCanvasHeight"
         >
       </div>
     </form>    
@@ -33,11 +27,28 @@
 </template>
 
 <script>
-  import MenuRow from './MenuRow.vue'
-  export default {
+import MenuRow from './MenuRow.vue'
+import {mapGetters} from 'vuex'
+export default {
   name: 'MenuGeneralOptions',
   components: {
     MenuRow
+  },
+  computed: {
+    ...mapGetters({
+      canvasWidth: 'getCanvasWidth',
+      canvasHeight: 'getCanvasHeight'
+    })
+  },
+  methods: {
+    updateCanvasHeight: function(event) {
+      const elem = event.target
+      this.$store.commit('setCanvasHeight', elem.value)
+    },
+    updateCanvasWidth: function(event) {
+      const elem = event.target
+      this.$store.commit('setCanvasWidth', elem.value)
+    }
   }
 }
 </script>