Hooked the new variable editor to the persistent store

pages/graphql.vue

@@ -364,7 +364,6 @@ export default {
   data() {
     return {
       schemaString: "",
-      variableString: "{}",
       commonHeaders: [
         "WWW-Authenticate",
         "Authorization",
@@ -527,6 +526,14 @@ export default {
         this.$store.commit("setGQLState", { value, attribute: "query" });
       }
     },
+    variableString: {
+      get() {
+        return this.$store.state.gql.variablesJSONString;
+      },
+      set(value) {
+        this.$store.commit("setGQLState", { value, attribute: "variablesJSONString" });
+      }
+    },
     headerString() {
       const result = this.headers
         .filter(({ key }) => !!key)

store/state.js

@@ -20,7 +20,7 @@ export default () => ({
   gql: {
     url: "https://rickandmortyapi.com/graphql",
     headers: [],
-    variables: [],
+    variablesJSONString: "",
     query: ""
   },
   oauth2: {