add vuex-persist

pages/index.vue

@@ -103,10 +103,24 @@
           </ul>
           <ul v-for="(param, index) in bodyParams" :key="index">
             <li>
-              <input :placeholder="'key '+(index+1)" :name="'bparam'+index" v-model="param.key" @keyup.prevent="setRouteQueryState" autofocus>
+              <input 
+                :placeholder="'key '+(index+1)" 
+                :name="'bparam'+index" 
+                :value="param.key" 
+                @change="$store.commit('setKeyBodyParams', { index, value: $event.target.value })" 
+                @keyup.prevent="setRouteQueryState" 
+                autofocus
+              >
             </li>
             <li>
-              <input :placeholder="'value '+(index+1)" :id="'bvalue'+index" :name="'bvalue'+index" v-model="param.value" @keyup.prevent="setRouteQueryState">
+              <input 
+                :placeholder="'value '+(index+1)" 
+                :id="'bvalue'+index" 
+                :name="'bvalue'+index" 
+                :value="param.value" 
+                @change="$store.commit('setValueBodyParams', { index, value: $event.target.value })" 
+                @keyup.prevent="setRouteQueryState"
+              >
             </li>
             <div>
               <li>
@@ -284,10 +298,23 @@
           </ul>
           <ul v-for="(header, index) in headers" :key="index">
             <li>
-              <input :placeholder="'header '+(index+1)" :name="'header'+index" v-model="header.key" @keyup.prevent="setRouteQueryState" autofocus>
+              <input 
+                :placeholder="'header '+(index+1)" 
+                :name="'header'+index" 
+                :value="header.key" 
+                @change="$store.commit('setKeyHeader', { index, value: $event.target.value })" 
+                @keyup.prevent="setRouteQueryState" 
+                autofocus
+              >
             </li>
             <li>
-              <input :placeholder="'value '+(index+1)" :name="'value'+index" v-model="header.value" @keyup.prevent="setRouteQueryState">
+              <input 
+                :placeholder="'value '+(index+1)" 
+                :name="'value'+index" 
+                :value="header.value" 
+                @change="$store.commit('setValueHeader', { index, value: $event.target.value })"  
+                @keyup.prevent="setRouteQueryState"
+              >
             </li>
             <div>
               <li>
@@ -327,10 +354,21 @@
           </ul>
           <ul v-for="(param, index) in params" :key="index">
             <li>
-              <input :placeholder="'parameter '+(index+1)" :name="'param'+index" v-model="param.key" autofocus>
+              <input 
+                :placeholder="'parameter '+(index+1)" 
+                :name="'param'+index" 
+                :value="param.key" 
+                @change="$store.commit('setKeyParams', { index, value: $event.target.value })" 
+                autofocus
+              >
             </li>
             <li>
-              <input :placeholder="'value '+(index+1)" :name="'value'+index" v-model="param.value">
+              <input 
+                :placeholder="'value '+(index+1)" 
+                :name="'value'+index" 
+                :value="param.value" 
+                @change="$store.commit('setValueParams', { index, value: $event.target.value })"
+              >
             </li>
             <div>
               <li>
@@ -428,25 +466,9 @@
     },
     data() {
       return {
-        label: '',
         showModal: false,
         copyButton: '<i class="material-icons">file_copy</i>',
         copiedButton: '<i class="material-icons">done</i>',
-        method: 'GET',
-        url: 'https://reqres.in',
-        auth: 'None',
-        path: '/api/users',
-        httpUser: '',
-        httpPassword: '',
-        passwordFieldType: 'password',
-        bearerToken: '',
-        headers: [],
-        params: [],
-        bodyParams: [],
-        rawParams: '',
-        rawInput: false,
-        contentType: 'application/json',
-        requestType: 'JavaScript XHR',
         isHidden: true,
         response: {
           status: '',
@@ -533,6 +555,70 @@
       }
     },
     computed: {
+      url: {
+        get() { return this.$store.state.request.url; },
+        set(value) { this.$store.commit('setState', { value, 'attribute': 'url' }) },
+      },
+      method: {
+        get() { return this.$store.state.request.method; },
+        set(value) { this.$store.commit('setState', { value, 'attribute': 'method' }) },
+      },
+      path: {
+        get() { return this.$store.state.request.path; },
+        set(value) { this.$store.commit('setState', { value, 'attribute': 'path' }) },
+      },
+      label: {
+        get() { return this.$store.state.request.label; },
+        set(value) { this.$store.commit('setState', { value, 'attribute': 'label' }) },
+      },
+      auth: {
+        get() { return this.$store.state.request.auth; },
+        set(value) { this.$store.commit('setState', { value, 'attribute': 'auth' }) },
+      },
+      httpUser: {
+        get() { return this.$store.state.request.httpUser; },
+        set(value) { this.$store.commit('setState', { value, 'attribute': 'httpUser' }) },
+      },
+      httpPassword: {
+        get() { return this.$store.state.request.httpPassword; },
+        set(value) { this.$store.commit('setState', { value, 'attribute': 'httpPassword' }) },
+      },
+      bearerToken: {
+        get() { return this.$store.state.request.bearerToken; },
+        set(value) { this.$store.commit('setState', { value, 'attribute': 'bearerToken' }) },
+      },
+      headers: {
+        get() { return this.$store.state.request.headers; },
+        set(value) { this.$store.commit('setState', { value, 'attribute': 'headers' }) },
+      },
+      params: {
+        get() { return this.$store.state.request.params; },
+        set(value) { this.$store.commit('setState', { value, 'attribute': 'params' }) },
+      },
+      bodyParams: {
+        get() { return this.$store.state.request.bodyParams; },
+        set(value) { this.$store.commit('setState', { value, 'attribute': 'bodyParams' }) },
+      },
+      rawParams: {
+        get() { return this.$store.state.request.rawParams; },
+        set(value) { this.$store.commit('setState', { value, 'attribute': 'rawParams' }) },
+      },
+      rawInput: {
+        get() { return this.$store.state.request.rawInput; },
+        set(value) { this.$store.commit('setState', { value, 'attribute': 'rawInput' }) },
+      },
+      requestType: {
+        get() { return this.$store.state.request.requestType; },
+        set(value) { this.$store.commit('setState', { value, 'attribute': 'requestType' }) },
+      },
+      contentType: {
+        get() { return this.$store.state.request.contentType; },
+        set(value) { this.$store.commit('setState', { value, 'attribute': 'contentType' }) },
+      },
+      passwordFieldType: {
+        get() { return this.$store.state.request.passwordFieldType; },
+        set(value) { this.$store.commit('setState', { value, 'attribute': 'passwordFieldType' })}
+      },
       requestName() {
         return this.label
       },
@@ -635,19 +721,19 @@
           requestString.push('  method: "' + this.method + '",\n')
           if (this.auth === 'Basic') {
             var basic = this.httpUser + ':' + this.httpPassword;
-            headers.push('    "Authorization": "Basic ' + window.btoa(unescape(encodeURIComponent(basic))) + ',\n')
+            this.$store.commit('addHeaders', '    "Authorization": "Basic ' + window.btoa(unescape(encodeURIComponent(basic))) + ',\n')
           } else if (this.auth === 'Bearer Token') {
-            headers.push('    "Authorization": "Bearer Token ' + this.bearerToken + ',\n')
+            this.$store.commit('addHeaders', '    "Authorization": "Bearer Token ' + this.bearerToken + ',\n')
           }
           if (['POST', 'PUT', 'PATCH'].includes(this.method)) {
             const requestBody = this.rawInput ? this.rawParams : this.rawRequestBody;
             requestString.push('  body: ' + requestBody + ',\n')
-            headers.push('    "Content-Length": ' + requestBody.length + ',\n')
+            this.$store.commit('addHeaders', '    "Content-Length": ' + requestBody.length + ',\n')
-            headers.push('    "Content-Type": "' + this.contentType + '; charset=utf-8",\n')
+            this.$store.commit('addHeaders', '    "Content-Type": "' + this.contentType + '; charset=utf-8",\n')
           }
           if (this.headers) {
             this.headers.forEach(function (element) {
-              headers.push('    "' + element.key + '": "' + element.value + '",\n');
+              this.$store.commit('addHeaders', '    "' + element.key + '": "' + element.value + '",\n')
             })
           }
           headers = headers.join('').slice(0, -3);
@@ -688,7 +774,7 @@
           return requestString.join('').slice(0, -3);
         }
       }
-    },
+    }, 
     methods: {
       handleUseHistory({
         label,
@@ -883,40 +969,36 @@
         this.params = params;
       },
       addRequestHeader() {
-        this.headers.push({
+        this.$store.commit('addHeaders', {
           key: '',
           value: ''
-        });
+        })
         return false
       },
       removeRequestHeader(index) {
-        this.headers.splice(index, 1)
+        this.$store.commit('removeHeaders', index)
         this.$toast.error('Deleted', {
           icon: 'delete'
         });
       },
       addRequestParam() {
-        this.params.push({
+        this.$store.commit('addParams', { key: '', value: '' })
-          key: '',
+
-          value: ''
-        })
         return false
       },
       removeRequestParam(index) {
-        this.params.splice(index, 1)
+        this.$store.commit('removeParams', index)
         this.$toast.error('Deleted', {
           icon: 'delete'
         });
       },
       addRequestBodyParam() {
-        this.bodyParams.push({
+        this.$store.commit('addBodyParams', { key: '', value: '' })
-          key: '',
+
-          value: ''
-        })
         return false
       },
       removeRequestBodyParam(index) {
-        this.bodyParams.splice(index, 1)
+        this.$store.commit('removeBodyParams', index)
         this.$toast.error('Deleted', {
           icon: 'delete'
         });
@@ -1066,10 +1148,7 @@
          this.path = "";
          this.headers = [];
           for (const key of Object.keys(parsedCurl.headers)) {
-            this.headers.push({
+            this.$store.commit('addHeaders', { key: key, value: parsedCurl.headers[key] })
-              key: key,
-              value: parsedCurl.headers[key]
-            })
           }
           this.method = parsedCurl.method.toUpperCase();
           if (parsedCurl["data"]){

store/index.js

@@ -1,3 +1,24 @@
-export default {
+import Vuex from 'vuex';
+import state from './state';
+import VuexPersist from 'vuex-persist'
 
-}
+export default {
+  install(Vue) {
+    Vue.use(Vuex);
+
+    const vuexLocalStorage = new VuexPersist({
+      key: 'vuex',
+      storage: window.localStorage,
+      reducer: ({ ...request }) => ({
+        ...request
+      })
+    })
+
+    const store = new Vuex.Store({
+      state,
+      plugins: [vuexLocalStorage.plugin]
+    });
+
+    Vue.prototype.$store = store;
+  },
+};

store/mutations.js

@@ -0,0 +1,53 @@
+export default {
+  setState(state, object){
+    state.request[object.attribute] = object.value
+  },
+
+  addHeaders(state, value) {
+    state.request.headers.push(value);
+  },
+
+  removeHeaders(state, index) {
+    state.request.headers.splice(index, 1)
+  },
+
+  setKeyHeader(state, object) {
+    state.request.headers[object.index].key = object.value
+  },
+
+  setValueHeader(state, object) {
+    state.request.headers[object.index].value = object.value
+  },
+
+  addParams(state, value) {
+    state.request.params.push(value);
+  },
+
+  removeParams(state, index) {
+    state.request.params.splice(index, 1)
+  },
+
+  setKeyParams(state, object) {
+    state.request.params[object.index].key = object.value
+  },
+
+  setValueParams(state, object) {
+    state.request.params[object.index].value = object.value
+  },
+
+  addBodyParams(state, value) {
+    state.request.bodyParams.push(value);
+  },
+
+  removeBodyParams(state, index) {
+    state.request.bodyParams.splice(index, 1)
+  },
+
+  setKeyBodyParams(state, object) {
+    state.request.bodyParams[object.index].key = object.value
+  },
+
+  setValueBodyParams(state, object) {
+    state.request.bodyParams[object.index].value = object.value
+  },
+};

store/state.js

@@ -0,0 +1,19 @@
+export default {
+  request: {
+    method: 'GET',
+    url: 'https://reqres.in',
+    path: '/api/users',
+    label: '',
+    auth: 'None',
+    httpUser: '',
+    httpPassword: '',
+    bearerToken: '',
+    headers: [],
+    params: [],
+    bodyParams: [],
+    rawParams: '',
+    rawInput: false,
+    requestType: '',
+    contentType: '',
+  }
+};