diff --git a/chameleon-client/package-lock.json b/chameleon-client/package-lock.json
index d34e56726..42e5c17c9 100644
--- a/chameleon-client/package-lock.json
+++ b/chameleon-client/package-lock.json
@@ -3490,8 +3490,7 @@
       "version": "4.6.0",
       "resolved": "https://registry.npmjs.org/co/-/co-4.6.0.tgz",
       "integrity": "sha1-bqa989hTrlTMuOR7+gvz+QMfsYQ=",
-      "dev": true,
-      "optional": true
+      "dev": true
     },
     "coa": {
       "version": "2.0.2",
@@ -9672,8 +9671,7 @@
       "version": "4.0.8",
       "resolved": "https://registry.npmjs.org/rx-lite/-/rx-lite-4.0.8.tgz",
       "integrity": "sha1-Cx4Rr4vESDbwSmQH6S2kJGe3lEQ=",
-      "dev": true,
-      "optional": true
+      "dev": true
     },
     "rx-lite-aggregates": {
       "version": "4.0.8",
@@ -13612,8 +13610,7 @@
             },
             "ansi-regex": {
               "version": "2.1.1",
-              "bundled": true,
-              "optional": true
+              "bundled": true
             },
             "aproba": {
               "version": "1.2.0",
@@ -13650,8 +13647,7 @@
             },
             "code-point-at": {
               "version": "1.1.0",
-              "bundled": true,
-              "optional": true
+              "bundled": true
             },
             "concat-map": {
               "version": "0.0.1",
@@ -13660,8 +13656,7 @@
             },
             "console-control-strings": {
               "version": "1.1.0",
-              "bundled": true,
-              "optional": true
+              "bundled": true
             },
             "core-util-is": {
               "version": "1.0.2",
@@ -13764,8 +13759,7 @@
             },
             "inherits": {
               "version": "2.0.3",
-              "bundled": true,
-              "optional": true
+              "bundled": true
             },
             "ini": {
               "version": "1.3.5",
@@ -13775,7 +13769,6 @@
             "is-fullwidth-code-point": {
               "version": "1.0.0",
               "bundled": true,
-              "optional": true,
               "requires": {
                 "number-is-nan": "^1.0.0"
               }
@@ -13788,20 +13781,17 @@
             "minimatch": {
               "version": "3.0.4",
               "bundled": true,
-              "optional": true,
               "requires": {
                 "brace-expansion": "^1.1.7"
               }
             },
             "minimist": {
               "version": "0.0.8",
-              "bundled": true,
-              "optional": true
+              "bundled": true
             },
             "minipass": {
               "version": "2.2.4",
               "bundled": true,
-              "optional": true,
               "requires": {
                 "safe-buffer": "^5.1.1",
                 "yallist": "^3.0.0"
@@ -13818,7 +13808,6 @@
             "mkdirp": {
               "version": "0.5.1",
               "bundled": true,
-              "optional": true,
               "requires": {
                 "minimist": "0.0.8"
               }
@@ -13891,8 +13880,7 @@
             },
             "number-is-nan": {
               "version": "1.0.1",
-              "bundled": true,
-              "optional": true
+              "bundled": true
             },
             "object-assign": {
               "version": "4.1.1",
@@ -13902,7 +13890,6 @@
             "once": {
               "version": "1.4.0",
               "bundled": true,
-              "optional": true,
               "requires": {
                 "wrappy": "1"
               }
@@ -13978,8 +13965,7 @@
             },
             "safe-buffer": {
               "version": "5.1.1",
-              "bundled": true,
-              "optional": true
+              "bundled": true
             },
             "safer-buffer": {
               "version": "2.1.2",
@@ -14009,7 +13995,6 @@
             "string-width": {
               "version": "1.0.2",
               "bundled": true,
-              "optional": true,
               "requires": {
                 "code-point-at": "^1.0.0",
                 "is-fullwidth-code-point": "^1.0.0",
@@ -14027,7 +14012,6 @@
             "strip-ansi": {
               "version": "3.0.1",
               "bundled": true,
-              "optional": true,
               "requires": {
                 "ansi-regex": "^2.0.0"
               }
@@ -14066,13 +14050,11 @@
             },
             "wrappy": {
               "version": "1.0.2",
-              "bundled": true,
-              "optional": true
+              "bundled": true
             },
             "yallist": {
               "version": "3.0.2",
-              "bundled": true,
-              "optional": true
+              "bundled": true
             }
           }
         },
@@ -18000,6 +17982,11 @@
       "integrity": "sha512-4gDntzrifFnCEvyoO8PqyJDmguXgVPxKiIxrBKjIowvL9l+N66196+72XVYR8BBf1Uv1Fgt3bGevJ+sEmxfZzw==",
       "dev": true
     },
+    "vuex": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/vuex/-/vuex-3.1.0.tgz",
+      "integrity": "sha512-mdHeHT/7u4BncpUZMlxNaIdcN/HIt1GsGG5LKByArvYG/v6DvHcOxvDCts+7SRdCoIRGllK8IMZvQtQXLppDYg=="
+    },
     "watchpack": {
       "version": "1.6.0",
       "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-1.6.0.tgz",
diff --git a/chameleon-client/package.json b/chameleon-client/package.json
index 950f8c55a..75e622507 100644
--- a/chameleon-client/package.json
+++ b/chameleon-client/package.json
@@ -12,6 +12,7 @@
     "vue": "^2.6.6",
     "vue-native-websocket": "^2.0.12",
     "vue-router": "^3.0.2",
+    "vuex": "^3.1.0",
     "webpack": "^4.29.6"
   },
   "devDependencies": {
diff --git a/chameleon-client/src/components/InputTab.vue b/chameleon-client/src/components/InputTab.vue
index 28e6dfe4a..9afaff82e 100644
--- a/chameleon-client/src/components/InputTab.vue
+++ b/chameleon-client/src/components/InputTab.vue
@@ -1,12 +1,11 @@
 
 <template>
     <div id="InputTab">
-        <chslider class="spacing" title="exposure" :parentData="values.exposure" @input="values.exposure = $event"></chslider>
-        <chslider class="spacing" title="Brightness" :parentData="values.brightness" @input="values.brightness = $event"></chslider>
-        <chselect class="spacing" title="Orientation" :list="['Normal','Inverted']" :parentData="values.orientation" @input="values.orientation = $event" ></chselect>
-        <chselect class="spacing" title="Resolution" :list="['idk']" :parentData="values.resolution" @input="values.resolution = $event" ></chselect>
+        <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>
         </div>
-
 </template>
     
 <script> 
@@ -16,12 +15,6 @@ import chselect from './ch-select.vue'
         name: 'InputTab',
         data () {
             return{
-                values:{
-                    exposure:0,
-                    brightness:0,
-                    orientation:0,
-                    resolution:0
-                }
             }
         },
         components: {
@@ -29,17 +22,16 @@ import chselect from './ch-select.vue'
             chselect
         },
         methods: {
-            onChange(i) {
-                console.log(i);
+            onChange: function(key,event) {
+                this.$store.commit(key, event);
+                console.log(this.$store.getters);
             }
         }
     }
-    
 </script>
 
 <style scoped>
 .spacing{
     margin-top: 20px;
 }
-
 </style>
diff --git a/chameleon-client/src/main.js b/chameleon-client/src/main.js
index ace124dd2..51aa74a25 100644
--- a/chameleon-client/src/main.js
+++ b/chameleon-client/src/main.js
@@ -6,6 +6,7 @@ import router from "./routes";
 import '../theme/index.less';
 import VueNativeSock from 'vue-native-websocket';
 import locale from 'iview/dist/locale/en-US';
+import {store} from './store'
 
 Vue.use(VueRouter);
 Vue.use(iView , { locale });
@@ -14,5 +15,6 @@ Vue.config.productionTip = false
 
 new Vue({
   router,
+  store,
   render: h => h(App)
 }).$mount('#app')
diff --git a/chameleon-client/src/store.js b/chameleon-client/src/store.js
new file mode 100644
index 000000000..a73bf867d
--- /dev/null
+++ b/chameleon-client/src/store.js
@@ -0,0 +1,29 @@
+import Vue from 'vue'
+import Vuex from 'vuex'
+
+Vue.use(Vuex);
+
+const set = key => (state,val) =>{
+    state[key] = val
+}
+export const store = new Vuex.Store({
+
+    state:{
+        exposure:0,
+        brightness:0,
+        orientation:0,
+        resolution:0 
+    },
+    mutations:{
+        brightness: set('brightness'),
+        exposure: set('exposure'),
+        orientation:set('orientation'),
+        resolution: set('resolution')
+    },
+    getters:{
+        brightness: state => state.brightness,
+        exposure: state => state.exposure,
+        orientation: state => state.orientation,
+        resolution: state => state.resolution
+    },
+});
\ No newline at end of file