Save settings (unsafe)

src/composables/useStore.ts

@@ -0,0 +1,33 @@
+import { load, type Store } from '@tauri-apps/plugin-store';
+let storePromise: Promise<Store> | null = null;
+
+function getStore(): Promise<Store> {
+  if (!storePromise) {
+    storePromise = load('store.json', {
+      autoSave: false,
+      defaults: {},
+    });
+  }
+  return storePromise;
+}
+
+export function useStore() {
+  const setValue = async <T>(key: string, value: T) => {
+    console.log('setValue',key,value);
+    const store = await getStore();
+    await store.set(key, value);
+  };
+
+  const getValue = async <T>(key: string) => {
+    console.log('getValue',key);
+    const store = await getStore();
+    return store.get<T>(key);
+  };
+
+  return {
+    setValue,
+    getValue,
+  };
+}
+
+

src/screens/SettingsScreen.vue

@@ -1,10 +1,49 @@
 <script setup lang="ts">
+import { useStore } from '../composables/useStore.ts';
+import { onMounted, ref } from 'vue';
 
+type Settings = {
+  username: string,
+  password: string
+}
+
+const { setValue, getValue } = useStore();
+
+const settingsDefault: Settings = {
+  username: '',
+  password: '',
+}
+const settings = ref<Settings>({...settingsDefault});
+
+const initData = async () => {
+  const readSettings = await getValue<Settings>('settings');
+  settings.value = readSettings ?? {...settingsDefault};
+}
+
+const handleSubmit = async (e: Event) => {
+  const data = Object.fromEntries(new FormData(e.target as HTMLFormElement)) as Settings
+  setValue<Settings>('settings', {
+    username: data.username,
+    password: data.password,
+  });
+  await initData();
+}
+onMounted(initData);
 </script>
 
 <template>
 <div>
-  Settings SCREEN
+  <form @submit.prevent="handleSubmit">
+    <fieldset class="fieldset">
+      <legend class="fieldset-legend">Username</legend>
+      <input :value="settings.username" type="text" class="input" name="username" />
+    </fieldset>
+    <fieldset class="fieldset">
+      <legend class="fieldset-legend">Password</legend>
+      <input type="password" :value="settings.password" class="input" name="password" />
+    </fieldset>
+    <button class="btn btn-primary" type="submit">Submit</button>
+  </form>
 </div>
 </template>