other components...

src/root/mypage/mypage.ts

@@ -1,31 +1,35 @@
-import { defineComponent } from 'vue'
+import { defineComponent, ref, onMounted, watch, computed } from 'vue'
 
-/*
-import { Component, Prop, Watch } from 'vue-property-decorator'
-import { GlobalStore, UserStore } from '@store'
-
-import { tools } from '../../store/Modules/tools'
-import { toolsext } from '../../store/Modules/toolsext'
-import { static_data } from '../../db/static_data'
-import { Screen } from 'quasar'
-
-import { colmypage } from '@src/store/Modules/fieldsTable'
-
-import { CImgText } from '../../components/CImgText/index'
-import { CCard, CGridTableRec, CMyPage, CTitleBanner } from '@components'
-import MixinMetaTags from '../../mixins/mixin-metatags'
-import MixinBase from '@src/mixins/mixin-base'
-import { IMyPage } from '@src/model/GlobalStore'
-
-@Component({
-  mixins: [MixinBase],
-  components: { CImgText, CCard, CMyPage, CTitleBanner }
-})*/
+import { useGlobalStore } from '@store/globalStore'
+import { useRoute } from 'vue-router'
 
 export default defineComponent({
   name: 'Mypage',
   setup() {
-    return {}
+    const rec = ref({})
+    const globalStore = useGlobalStore()
+    const route = useRoute()
+    const path = computed(() => route.path)
+
+    async function created() {
+      // console.log('this.$route.path', this.$route.path)
+      rec.value = await globalStore.loadPage(route.path)
+      // console.log('mounted', this.rec)
+    }
+
+    watch(path, async (to: string, from: string) =>  {
+      rec.value = await globalStore.loadPage(to)
+    })
+
+    function meta() {
+      // return tools.metafunc(this)
+    }
+
+    onMounted(created)
+
+    return {
+      rec,
+    }
   },
 })
 /*
@@ -36,14 +40,14 @@ export default class Mypage extends MixinMetaTags {
 
   public async mounted() {
     // console.log('this.$route.path', this.$route.path)
-    this.rec = await GlobalStore.actions.loadPage(this.$route.path)
+    this.rec = await GlobalStore.loadPage(this.$route.path)
     // console.log('mounted', this.rec)
   }
 
   @Watch('$route.path')
   public async changepage() {
     // console.log('changepage')
-    this.rec = await GlobalStore.actions.loadPage(this.$route.path)
+    this.rec = await GlobalStore.loadPage(this.$route.path)
   }
 
   public meta() {

src/root/mypage/mypage.vue

@@ -1,6 +1,43 @@
 <template>
   <div>
-    Mia Pagina...
+    <CMyPage
+      :title="rec.title" :imgbackground="`statics/` + rec.imgback"
+      :sizes="`max-height: ` + rec.heightimg + `px`">
+            <span>{{
+                setmeta({
+                  title: rec.title,
+                  description: rec.description,
+                  keywords: rec.keywords,
+                })
+              }}
+            </span>
+
+      <div class="q-ma-sm q-gutter-sm q-pa-xs">
+        <div v-if="!!rec.img1" class="text-center">
+          <q-img :src="`statics/`+ rec.img1" class="img"></q-img>
+        </div>
+
+        <div v-if="!!rec.content" v-html="rec.content"></div>
+        <q-video v-if="!!rec.video1" :src="rec.video1" :ratio="rec.ratio1">
+        </q-video>
+
+        <div v-if="!!rec.img2" class="text-center">
+          <q-img :src="`statics/`+ rec.img2" class="img"></q-img>
+        </div>
+
+        <div v-if="!!rec.content2" v-html="rec.content2"></div>
+        <q-video v-if="!!rec.video2" :src="rec.video2" :ratio="rec.ratio2"></q-video>
+
+        <div v-if="!!rec.img3" class="text-center">
+          <q-img :src="`statics/`+ rec.img2" class="img"></q-img>
+        </div>
+
+        <div v-if="!!rec.content3" v-html="rec.content3"></div>
+        <q-video v-if="!!rec.video3" :src="rec.video3" :ratio="rec.ratio3"></q-video>
+        <div v-if="!!rec.content4" v-html="rec.content4"></div>
+
+      </div>
+    </CMyPage>
   </div>
 </template>
 <script lang="ts" src="./mypage.ts">
@@ -9,4 +46,3 @@
 <style lang="scss" scoped>
 @import 'mypage.scss';
 </style>
-

src/root/mypage/mypage.vue.orig

@@ -1,47 +0,0 @@
-<template>
-  <div>
-    <CMyPage :title="rec.title" :imgbackground="`public/` + rec.imgback"
-             :sizes="`max-height: ` + rec.heightimg + `px`">
-            <span>{{
-                setmeta({
-                  title: rec.title,
-                  description: rec.description,
-                  keywords: rec.keywords
-                })
-              }}
-            </span>
-
-      <div class="q-ma-sm q-gutter-sm q-pa-xs">
-        <div v-if="!!rec.img1" class="text-center">
-          <q-img :src="`public/`+ rec.img1" class="img"></q-img>
-        </div>
-
-        <div v-if="!!rec.content" v-html="rec.content"></div>
-        <q-video v-if="!!rec.video1" :src="rec.video1" :ratio="rec.ratio1">
-        </q-video>
-
-        <div v-if="!!rec.img2" class="text-center">
-          <q-img :src="`public/`+ rec.img2" class="img"></q-img>
-        </div>
-
-        <div v-if="!!rec.content2" v-html="rec.content2"></div>
-        <q-video v-if="!!rec.video2" :src="rec.video2" :ratio="rec.ratio2"></q-video>
-
-        <div v-if="!!rec.img3" class="text-center">
-          <q-img :src="`public/`+ rec.img2" class="img"></q-img>
-        </div>
-
-        <div v-if="!!rec.content3" v-html="rec.content3"></div>
-        <q-video v-if="!!rec.video3" :src="rec.video3" :ratio="rec.ratio3"></q-video>
-        <div v-if="!!rec.content4" v-html="rec.content4"></div>
-
-      </div>
-    </CMyPage>
-  </div>
-</template>
-<script lang="ts" src="./mypage.ts">
-
-</script>
-<style lang="scss" scoped>
-@import 'mypage.scss';
-</style>