link GetUnits.vue with store

guiapp/src/components/GetUnits.vue

@@ -10,14 +10,14 @@
 
         <div class="col-auto" >
           <q-select
+              v-model="localUnits"
+              :options="unitsOptions"
               class="q-pa-xs"
               outlined
               dense
               options-dense
               style="width: 7em"
               behavior="menu"
-              v-model="localUnits"
-              :options="unitsOptions"
           >
           </q-select>
         </div>
@@ -35,15 +35,15 @@
                 option-value="label"
                 option-label="label"
             >
-              <template v-slot:option="scope">
+              <template #option="scope">
                 <q-item :label="scope.opt.title" dense>
                   <q-item-section class="text-weight-bold">{{ scope.opt.title }}</q-item-section>
                 </q-item>
                 <template v-for="child in scope.opt.children" :key="child.label">
-                  <q-item clickable v-close-popup dense
+                  <q-item v-close-popup dense clickable
                           @click="localSourceUnits = child"
                   >
-                    <q-item-section> <q-item-label v-html="child.label" class="q-ml-md" /> </q-item-section>
+                    <q-item-section> <q-item-label class="q-ml-md"> {{child.label}} </q-item-label> </q-item-section>
                   </q-item>
                 </template>
               </template>
@@ -57,11 +57,10 @@
           </div>
         </div>
 
-        <div class="col-auto" >
-          units: {{localSourceUnits}}
-          <br> isSource: {{isSourceSameUnits}}
-
-        </div>
+<!--        <div class="col-auto" >-->
+<!--          units: {{localSourceUnits}}-->
+<!--          <br> store: {{$store.state.guiRuntime}}-->
+<!--        </div>-->
       </div>
     </div>
   </div>
@@ -71,7 +70,6 @@
 import {
   defineComponent,
   computed,
-  ref
   } from 'vue'
 import { useStore } from 'src/store'
 import { flexRowTitleStyle } from 'components/utils'
@@ -83,7 +81,6 @@ export default defineComponent({
 
   setup() {
     const unitsOptions = [ 'nm', 'mkm', 'mm', 'cm', 'm', 'km' ]
-    let localUnits = ref('nm')
     const sourceUnitsOptions = [
       { title: 'Frequency',
         children: [{label: 'Hz'},{label: 'kHz'},{label: 'MHz'},{label: 'GHz'},{label: 'THz'}]},
@@ -92,15 +89,22 @@ export default defineComponent({
       { title: 'Period duration',
         children: [{label: 'ps'}, {label: 'fs'}]}
     ]
-    let localSourceUnits = ref({ "label": "THz" } )
     const $store = useStore()
 
-    // let isSourceOtherUnits = ref(true)
     const isSourceSameUnits = computed({
       get: () => $store.state.guiRuntime.isSourceSameUnits,
       set: val => $store.commit('guiRuntime/setIsSourceSameUnits', val)
     })
 
+    const localUnits = computed({
+      get: () => $store.state.guiRuntime.units,
+      set: val => $store.commit('guiRuntime/setUnits', val)
+    })
+
+    const localSourceUnits = computed({
+      get: () => {return {label:$store.state.guiRuntime.sourceUnits}},
+      set: val => $store.commit('guiRuntime/setSourceUnits', val.label)
+    })
 
     return { isSourceSameUnits, flexRowTitleStyle,
       unitsOptions, localUnits,

guiapp/src/pages/Spectrum.vue

@@ -5,10 +5,6 @@
     <div class="q-ma-xs"/>
     <GetHostIndex/>
     <div class="q-ma-xs"/>
-    <GetHostIndex/>
-    <div class="q-ma-xs"/>
-    <GetSourceParameters/>
-    <div class="q-ma-xs"/>
     <GetSourceParameters/>
     <div class="col-auto">
       Input result: {{$store.state.simulationSetup.gui.fromWL}}