vuex realtime value redone

chameleon-client/src/components/InputTab.vue

@@ -1,10 +1,11 @@
 
 <template>
     <div id="InputTab">
-        <chslider class="spacing" title="exposure" :parentData="$store.getters.exposure" @input="onChange('exposure',$event)"></chslider>
-        <chslider class="spacing" title="Brightness" :parentData="$store.getters.brightness" @input="onChange('brightness',$event)"></chslider>
-        <chselect class="spacing" title="Orientation" :list="['Normal','Inverted']" :parentData="$store.getters.orientation" @input="onChange('orientation',$event)"></chselect>
-        <chselect class="spacing" title="Resolution" :list="['idk']" :parentData="$store.getters.resolution" @input="onChange('resolution',$event)"></chselect>
+        <chslider class="spacing" title="exposure" Xkey="exposure"></chslider>
+        <chslider class="spacing" title="Brightness" Xkey="brightness"></chslider>
+        <chselect class="spacing" title="Orientation" Xkey="orientation" :list="['Normal','Inverted']"></chselect>
+        <chselect class="spacing" title="Resolution" Xkey="resolution"  :list="['Normal','Inverted']"></chselect>
+        <button v-on:click="test">test</button>
         </div>
 </template>
     
@@ -22,9 +23,8 @@ import chselect from './ch-select.vue'
             chselect
         },
         methods: {
-            onChange: function(key,event) {
-                this.$store.commit(key, event);
-                console.log(this.$store.getters);
+            test(){
+                console.log(this.$store.state)
             }
         }
     }

chameleon-client/src/components/Vision.vue

@@ -3,10 +3,10 @@
         <Header id="main-header">
             <Row type="flex" justify="start" align="middle" :gutter="10">
                 <Col span="12">
-                    <chselect title="camera" :parentData="$store.getters.camera" @input="onChange('camera',$event)" :list="[1,2,3]"></chselect>
+                    <chselect title="camera" :list="[1,2,3]" Xkey="camera"></chselect>
                 </Col>
                 <Col span="12">
-                    <chselect title="pipline" :list="[0,1,2,3,4,5,6,7,8,9]" :parentData="$store.getters.pipline" @input="onChange('pipline',$event)"></chselect>
+                    <chselect title="pipline" :list="[0,1,2,3,4,5,6,7,8,9]" Xkey="pipeline"></chselect>
                 </Col>
             </Row>
         </Header>

chameleon-client/src/components/ch-select.vue

@@ -14,24 +14,30 @@
 <script>
     export default {
         name: 'ch-select',
-        props:[
-            'title',
-            'list',
-            'parentData'
-        ],
+        props:{
+            title:'',
+            list:[],
+            Xkey:''
+        },
         data() {
             return {
-                content:this.value
+                value
             }
         },
         methods: {
             handleInput() {
-                this.$emit('input',this.value);
-                this.$socket.sendObj({[this.title]:this.value});
+                this.$socket.sendObj({[this.Xkey]:this.value});
             }
         },
-        beforeMount () {
-            this.value = this.parentData
+        computed:{
+            value:{
+                get: function(){
+                    return this.$store.state[this.Xkey];
+                },
+                set: function(value){
+                    this.$store.commit(this.Xkey,value);
+                }
+            }
         }
     }
 </script>

chameleon-client/src/components/ch-slider.vue

@@ -16,20 +16,29 @@
 <script>
     export default {
         name: 'ch-slider',
-        props:['title','parentData'],
+        props:{
+            title:'',
+            Xkey:''
+        },
         data() {
             return {
-                value:0,
+                value
             }
         },
         methods: {
             handleInput() {
-                this.$emit('input',this.value);
-                this.$socket.sendObj({[this.title]:this.value});
+                this.$socket.sendObj({[this.Xkey]:this.value});
             }
         },
-        beforeMount () {
-            this.value = this.parentData
+        computed:{
+            value:{
+                get: function(){
+                    return this.$store.state[this.Xkey];
+                },
+                set: function(value){
+                    this.$store.commit(this.Xkey,value);
+                }
+            }
         }
     }
 </script>

chameleon-client/src/store.js

@@ -7,13 +7,14 @@ const set = key => (state,val) =>{
     state[key] = val
 }
 export const store = new Vuex.Store({
+    strict: true,
 
     state:{
         //header
         camera:0,
         pipeline:0,
         //input
-        exposure:0,
+        exposure:54,
         brightness:0,
         orientation:0,
         resolution:0,