basic store usage

guiapp/src/pages/Spectrum.vue

@@ -22,14 +22,21 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, ref, computed } from 'vue';
+import { defineComponent, ref,
+  // computed
+} from 'vue';
 import { useStore } from 'vuex'
 import InputWithUnits from 'components/InputWithUnits.vue';
+// import {store} from "quasar/wrappers";
+import {storeKey} from "src/store";
+
 
 export default defineComponent({
   name: 'PageIndex',
   components: {InputWithUnits },
   setup() {
+    const $store = useStore(storeKey)
+    console.log( 'store value',$store.state.example.prop)
     let someValue = ref(10);
     let someExpr = ref('10');
     // InputWithUnits component will disable showing help after first input

guiapp/src/store/index.ts

@@ -6,8 +6,8 @@ import {
   useStore as vuexUseStore,
 } from 'vuex'
 
-// import example from './module-example'
-// import { ExampleStateInterface } from './module-example/state';
+import example from './module-example'
+import { ExampleStateInterface } from './module-example/state';
 
 /*
  * If not building with SSR mode, you can
@@ -20,9 +20,9 @@ import {
 
 export interface StateInterface {
   // Define your own store structure, using submodules if needed
-  // example: ExampleStateInterface;
+  example: ExampleStateInterface;
   // Declared as unknown to avoid linting issue. Best to strongly type as per the line above.
-  example: unknown
+  // example: unknown
 }
 
 // provide typings for `this.$store`
@@ -38,7 +38,7 @@ export const storeKey: InjectionKey<VuexStore<StateInterface>> = Symbol('vuex-ke
 export default store(function (/* { ssrContext } */) {
   const Store = createStore<StateInterface>({
     modules: {
-      // example
+      example
     },
 
     // enable strict mode (adds overhead!)
@@ -51,4 +51,4 @@ export default store(function (/* { ssrContext } */) {
 
 export function useStore() {
   return vuexUseStore(storeKey)
-}
+}