init pinia

2025-01-03 17:37:54 +07:00
parent b0221e1d21
commit de425bd9e5
15 changed files with 241 additions and 34 deletions
@@ -1,24 +1,37 @@
 <template>
  <div>
-    <component v-if="asyncPageComponent" :is="asyncPageComponent" />
+    <component
+      v-if="asyncPageComponent"
+      :is="asyncPageComponent"
+      @increment="(v: number) => emit('increment', v)"
+    />
  </div>
 </template>

-<script setup>
+<script setup lang="ts">
 import { defineAsyncComponent } from "vue"
+import { useHostPinia } from "~/composables/useHostPinia"
+
+const props = defineProps<{
+  label: string
+}>()
+
+const emit = defineEmits<{
+  (e: "increment", count: number): void
+}>()
+
+useHostPinia()

 /**
 * @todo
 * it'll be nice if there is a way to dynamically match route and render..
 */
-console.log(">>", window.location.pathname)
-
 const Index = defineAsyncComponent(() => import("@/pages/contact/index.vue"))
-const Properties = defineAsyncComponent(() =>
-  import("@/pages/contact/properties.vue")
+const Properties = defineAsyncComponent(
+  () => import("@/pages/contact/properties.vue")
 )

-let asyncPageComponent
+let asyncPageComponent: unknown
 if (/\/contact\/properties/.test(window.location.pathname)) {
  asyncPageComponent = Properties
 } else {
@@ -0,0 +1,10 @@
+import { onBeforeMount } from "vue"
+import { setActivePinia } from "pinia"
+
+export function useHostPinia() {
+  onBeforeMount(() => {
+    console.log("RMT: init pinia store from host: ")
+    // @ts-expect-error global pinia host
+    setActivePinia(window.__mfeHostPinia || createPinia())
+  })
+}
@@ -22,8 +22,7 @@ export default defineNuxtConfig({
          exposes: {
            "./RemoteContactRouter": "./components/RemoteContactRouter.vue"
          },
-          // shared: []
-          shared: ["vue"]
+          shared: ["vue", "pinia"]
        })
      ]
    },
@@ -35,6 +34,7 @@ export default defineNuxtConfig({
    //   target: "esnext"
    // }
  },
+  modules: ["@pinia/nuxt"],
  experimental: {
    asyncEntry: true
  }
@@ -15,13 +15,15 @@
    "serve": "serve .output/public -p 3001 --cors --single"
  },
  "dependencies": {
+    "@pinia/nuxt": "^0.9.0",
    "nuxt": "^3.15.0",
+    "pinia": "^2.3.0",
    "vue": "^3.5.13"
  },
  "devDependencies": {
    "@originjs/vite-plugin-federation": "^1.3.5",
-    "serve": "~14.2.4",
    "rimraf": "6",
+    "serve": "~14.2.4",
    "vite-plugin-top-level-await": "~1.4.4"
  }
 }
@@ -3,13 +3,27 @@
    <h1>rmt/pages/contact/index.vue</h1>
    <div>Contact index</div>
    <div>
-      count: {{ count }}
-      <button type="button" @click="count++">increment+</button>
+      count: {{ count }} / counterFromPinia: {{ counter.$state.count }} <br />
+      <button type="button" @click="count++">increment+ local</button>
+      <button type="button" @click="handleIncrementPinia">
+        increment+ pinia
+      </button>
    </div>
  </div>
 </template>
-<script setup>
+<script setup lang="ts">
+import { useCounter } from "@/stores/counter"
+const counter = useCounter()
 const count = ref(0)
+
+const emit = defineEmits<{
+  (e: "increment", count: number): void
+}>()
+
+const handleIncrementPinia = () => {
+  counter.increment()
+  emit("increment", counter.$state.count)
+}
 </script>
 <style scoped>
 .rmt {
@@ -8,9 +8,15 @@ importers:

  .:
    dependencies:
+      '@pinia/nuxt':
+        specifier: ^0.9.0
+        version: 0.9.0(magicast@0.3.5)(pinia@2.3.0(typescript@5.7.2)(vue@3.5.13(typescript@5.7.2)))(rollup@4.28.1)
      nuxt:
        specifier: ^3.15.0
        version: 3.15.0(@parcel/watcher@2.5.0)(@types/node@22.10.2)(db0@0.2.1)(ioredis@5.4.2)(magicast@0.3.5)(rollup@4.28.1)(terser@5.37.0)(typescript@5.7.2)(vite@6.0.5(@types/node@22.10.2)(jiti@2.4.2)(terser@5.37.0)(yaml@2.6.1))(yaml@2.6.1)
+      pinia:
+        specifier: ^2.3.0
+        version: 2.3.0(typescript@5.7.2)(vue@3.5.13(typescript@5.7.2))
      vue:
        specifier: ^3.5.13
        version: 3.5.13(typescript@5.7.2)
@@ -809,6 +815,11 @@ packages:
    resolution: {integrity: sha512-i0GV1yJnm2n3Yq1qw6QrUrd/LI9bE8WEBOTtOkpCXHHdyN3TAGgqAK/DAT05z4fq2x04cARXt2pDmjWjL92iTQ==}
    engines: {node: '>= 10.0.0'}

+  '@pinia/nuxt@0.9.0':
+    resolution: {integrity: sha512-2yeRo7LeyCF68AbNeL3xu2h6uw0617RkcsYxmA8DJM0R0PMdz5wQHnc44KeENQxR/Mrq8T910XVT6buosqsjBQ==}
+    peerDependencies:
+      pinia: ^2.3.0
+
  '@pkgjs/parseargs@0.11.0':
    resolution: {integrity: sha512-+1VkjdD0QBLPodGrJUeqarH8VAIvQODIbwh9XpP5Syisf7YoQgsJKPNFoqqLQlu+VQ/tVSshMR6loPMn8U+dPg==}
    engines: {node: '>=14'}
@@ -2571,6 +2582,15 @@ packages:
    resolution: {integrity: sha512-M7BAV6Rlcy5u+m6oPhAPFgJTzAioX/6B0DxyvDlo9l8+T3nLKbrczg2WLUyzd45L8RqfUMyGPzekbMvX2Ldkwg==}
    engines: {node: '>=12'}

+  pinia@2.3.0:
+    resolution: {integrity: sha512-ohZj3jla0LL0OH5PlLTDMzqKiVw2XARmC1XYLdLWIPBMdhDW/123ZWr4zVAhtJm+aoSkFa13pYXskAvAscIkhQ==}
+    peerDependencies:
+      typescript: '>=4.4.4'
+      vue: ^2.7.0 || ^3.5.11
+    peerDependenciesMeta:
+      typescript:
+        optional: true
+
  pkg-types@1.2.1:
    resolution: {integrity: sha512-sQoqa8alT3nHjGuTjuKgOnvjo4cljkufdtLMnO2LBP/wRwuDlo1tkaEdMxCRhyGRPacv/ztlZgDPm2b7FAmEvw==}

@@ -3451,6 +3471,17 @@ packages:
  vue-bundle-renderer@2.1.1:
    resolution: {integrity: sha512-+qALLI5cQncuetYOXp4yScwYvqh8c6SMXee3B+M7oTZxOgtESP0l4j/fXdEJoZ+EdMxkGWIj+aSEyjXkOdmd7g==}

+  vue-demi@0.14.10:
+    resolution: {integrity: sha512-nMZBOwuzabUO0nLgIcc6rycZEebF6eeUfaiQx9+WSk8e29IbLvPU9feI6tqW4kTo3hvoYAJkMh8n8D0fuISphg==}
+    engines: {node: '>=12'}
+    hasBin: true
+    peerDependencies:
+      '@vue/composition-api': ^1.0.0-rc.1
+      vue: ^3.0.0-0 || ^2.6.0
+    peerDependenciesMeta:
+      '@vue/composition-api':
+        optional: true
+
  vue-devtools-stub@0.1.0:
    resolution: {integrity: sha512-RutnB7X8c5hjq39NceArgXg28WZtZpGc3+J16ljMiYnFhKvd8hITxSWQSQ5bvldxMDU6gG5mkxl1MTQLXckVSQ==}

@@ -4320,6 +4351,15 @@ snapshots:
      '@parcel/watcher-win32-ia32': 2.5.0
      '@parcel/watcher-win32-x64': 2.5.0

+  '@pinia/nuxt@0.9.0(magicast@0.3.5)(pinia@2.3.0(typescript@5.7.2)(vue@3.5.13(typescript@5.7.2)))(rollup@4.28.1)':
+    dependencies:
+      '@nuxt/kit': 3.15.0(magicast@0.3.5)(rollup@4.28.1)
+      pinia: 2.3.0(typescript@5.7.2)(vue@3.5.13(typescript@5.7.2))
+    transitivePeerDependencies:
+      - magicast
+      - rollup
+      - supports-color
+
  '@pkgjs/parseargs@0.11.0':
    optional: true

@@ -6285,6 +6325,16 @@ snapshots:

  picomatch@4.0.2: {}

+  pinia@2.3.0(typescript@5.7.2)(vue@3.5.13(typescript@5.7.2)):
+    dependencies:
+      '@vue/devtools-api': 6.6.4
+      vue: 3.5.13(typescript@5.7.2)
+      vue-demi: 0.14.10(vue@3.5.13(typescript@5.7.2))
+    optionalDependencies:
+      typescript: 5.7.2
+    transitivePeerDependencies:
+      - '@vue/composition-api'
+
  pkg-types@1.2.1:
    dependencies:
      confbox: 0.1.8
@@ -7165,6 +7215,10 @@ snapshots:
    dependencies:
      ufo: 1.5.4

+  vue-demi@0.14.10(vue@3.5.13(typescript@5.7.2)):
+    dependencies:
+      vue: 3.5.13(typescript@5.7.2)
+
  vue-devtools-stub@0.1.0: {}

  vue-router@4.5.0(vue@3.5.13(typescript@5.7.2)):
@@ -0,0 +1,24 @@
+import { defineStore } from "pinia"
+
+const sleep = (ms: number) => new Promise((resolve) => setTimeout(resolve, ms))
+
+export const useCounter = defineStore("counter", {
+  state: () => ({
+    count: 999
+  }),
+  actions: {
+    increment() {
+      this.count += 1
+    },
+
+    async asyncIncrement() {
+      console.log("asyncIncrement called")
+      await sleep(300)
+      this.count++
+      return true
+    }
+  },
+  getters: {
+    getCount: (state) => state.count
+  }
+})