Запилил хранилище данных, первая настройка

package-lock.json

@@ -9480,6 +9480,11 @@
         "jsonify": "~0.0.0"
       }
     },
+    "shvl": {
+      "version": "1.3.1",
+      "resolved": "https://registry.npmjs.org/shvl/-/shvl-1.3.1.tgz",
+      "integrity": "sha512-+rRPP46hloYUAEImJcqprUgXu+05Ikqr4h4V+w5i2zJy37nAqtkQKufs3+3S2fDq6JNRrHMIQhB/Vaex+jgAAw=="
+    },
     "signal-exit": {
       "version": "3.0.2",
       "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-3.0.2.tgz",
@@ -10884,6 +10889,22 @@
       "resolved": "https://registry.npmjs.org/vuex/-/vuex-3.1.0.tgz",
       "integrity": "sha512-mdHeHT/7u4BncpUZMlxNaIdcN/HIt1GsGG5LKByArvYG/v6DvHcOxvDCts+7SRdCoIRGllK8IMZvQtQXLppDYg=="
     },
+    "vuex-persistedstate": {
+      "version": "2.5.4",
+      "resolved": "https://registry.npmjs.org/vuex-persistedstate/-/vuex-persistedstate-2.5.4.tgz",
+      "integrity": "sha512-XYJhKIwO+ZVlTaXyxKxnplrJ88Fnvk5aDw753bxzRw5/yMKLQ6lq9CDCBex2fwZaQcLibhtgJOxGCHjy9GLSlQ==",
+      "requires": {
+        "deepmerge": "^2.1.0",
+        "shvl": "^1.3.0"
+      },
+      "dependencies": {
+        "deepmerge": {
+          "version": "2.2.1",
+          "resolved": "https://registry.npmjs.org/deepmerge/-/deepmerge-2.2.1.tgz",
+          "integrity": "sha512-R9hc1Xa/NOBi9WRVUWg19rl1UB7Tt4kuPd+thNJgFZoxXsTz7ncaPaeIm+40oSGuP33DfMb4sZt1QIGiJzC4EA=="
+        }
+      }
+    },
     "watchpack": {
       "version": "1.6.0",
       "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-1.6.0.tgz",

package.json

@@ -14,7 +14,8 @@
     "popper.js": "^1.15.0",
     "vue": "^2.6.10",
     "vue-router": "^3.0.3",
-    "vuex": "^3.0.1"
+    "vuex": "^3.0.1",
+    "vuex-persistedstate": "^2.5.4"
   },
   "devDependencies": {
     "@vue/cli-plugin-babel": "^3.7.0",

src/components/Packet.vue

@@ -15,7 +15,7 @@ export default {
 	name: 'Packet',
 	props: ['id', 'content', 'timestamp',],
 	mounted() {
-		const instance = new Hexdump(atob(this.$props.content), {
+		new Hexdump(atob(this.$props.content), { // TODO: в настройки
 			container: 'hexdump-' + this.$props.id,
 			base: 'hex',
 			width: 16,
@@ -34,7 +34,6 @@ export default {
 				stringNull: '.',
 			},
 		});
-		console.trace('created hexview', instance);
 	},
 }
 </script>

src/components/SettingsModal.vue

@@ -2,10 +2,15 @@
 	<div class="modal-mask">
 		<div class="modal-wrapper">
 			<div class="modal-container">
-				Test modal!
-				<button @click="$emit('close')">
-					Close
-				</button>
+				<form>
+					<div class="form-group">
+						<label for="inputApiUrl">URL бэкенда</label>
+						<input type="url" class="form-control" id="inputApiUrl" placeholder="URL" v-model="apiUrl">
+					</div>
+					<button type="submit" @click.prevent="$emit('close')" class="btn btn-primary">
+						Close
+					</button>
+				</form>
 			</div>
 		</div>
 	</div>
@@ -27,6 +32,16 @@ export default {
 	beforeDestroy() {
 		document.removeEventListener('keyup', this.$data.escapeKeyCallback);
 	},
+	computed: {
+		apiUrl: {
+			get() {
+				return this.$store.state.apiUrl;
+			},
+			set(value) {
+				this.$store.commit('setApiUrl', value);
+			},
+		},
+	},
 }
 </script>
 

src/store.js

@@ -1,16 +1,18 @@
 import Vue from 'vue'
 import Vuex from 'vuex'
+import createPersistedState from 'vuex-persistedstate'
 
 Vue.use(Vuex);
 
 export default new Vuex.Store({
 	state: {
-
+		apiUrl: 'http://127.0.0.1/api',
 	},
 	mutations: {
-
-	},
-	actions: {
-
+		setApiUrl: (state, payload) => state.apiUrl = payload,
 	},
+	// actions: {
+	// 	setApiUrl: async (injectee, payload) => injectee.commit('setApiUrl', payload),
+	// },
+	plugins: [createPersistedState(),],
 })