From de425bd9e55bca872c87e3d188d611f36c49c20e Mon Sep 17 00:00:00 2001 From: Antony Budianto Date: Fri, 3 Jan 2025 17:37:54 +0700 Subject: [PATCH] init pinia --- host/error.vue | 14 ------ host/nuxt.config.ts | 3 +- host/package.json | 4 +- host/pages/contact/[...all].vue | 12 +++-- host/pages/index.vue | 12 ++++- host/plugins/pinia.ts | 9 ++++ host/pnpm-lock.yaml | 54 +++++++++++++++++++++++ host/stores/counter.ts | 24 ++++++++++ remote/components/RemoteContactRouter.vue | 27 +++++++++--- remote/composables/useHostPinia.ts | 10 +++++ remote/nuxt.config.ts | 4 +- remote/package.json | 4 +- remote/pages/contact/index.vue | 20 +++++++-- remote/pnpm-lock.yaml | 54 +++++++++++++++++++++++ remote/stores/counter.ts | 24 ++++++++++ 15 files changed, 241 insertions(+), 34 deletions(-) delete mode 100644 host/error.vue create mode 100644 host/plugins/pinia.ts create mode 100644 host/stores/counter.ts create mode 100644 remote/composables/useHostPinia.ts create mode 100644 remote/stores/counter.ts diff --git a/host/error.vue b/host/error.vue deleted file mode 100644 index 6b28ba8..0000000 --- a/host/error.vue +++ /dev/null @@ -1,14 +0,0 @@ - - - diff --git a/host/nuxt.config.ts b/host/nuxt.config.ts index e08bdda..1f3a291 100644 --- a/host/nuxt.config.ts +++ b/host/nuxt.config.ts @@ -33,7 +33,7 @@ export default defineNuxtConfig({ remotes: { remote: `${MFE_HOST}/_nuxt/remoteEntry.js` }, - shared: ["vue"] + shared: ["vue", "pinia"] }) ] }, @@ -41,6 +41,7 @@ export default defineNuxtConfig({ plugins: [] } }, + plugins: ["~/plugins/pinia"], experimental: { asyncEntry: true } diff --git a/host/package.json b/host/package.json index 952f941..2fec249 100644 --- a/host/package.json +++ b/host/package.json @@ -15,13 +15,15 @@ "serve": "serve .output/public -p 3000 --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" } } diff --git a/host/pages/contact/[...all].vue b/host/pages/contact/[...all].vue index 5a36359..dd2d71c 100644 --- a/host/pages/contact/[...all].vue +++ b/host/pages/contact/[...all].vue @@ -4,7 +4,7 @@
- diff --git a/host/pages/index.vue b/host/pages/index.vue index c83f0ba..c4dd48d 100644 --- a/host/pages/index.vue +++ b/host/pages/index.vue @@ -1,3 +1,13 @@ + diff --git a/host/plugins/pinia.ts b/host/plugins/pinia.ts new file mode 100644 index 0000000..4d1a06a --- /dev/null +++ b/host/plugins/pinia.ts @@ -0,0 +1,9 @@ +import { createPinia } from "pinia" +import { defineNuxtPlugin } from "#app" + +export default defineNuxtPlugin((nuxtApp) => { + const pinia = createPinia() + // @ts-expect-error need global + window.__mfeHostPinia = pinia + nuxtApp.vueApp.use(pinia) +}) diff --git a/host/pnpm-lock.yaml b/host/pnpm-lock.yaml index 9f370db..8da0dcc 100644 --- a/host/pnpm-lock.yaml +++ b/host/pnpm-lock.yaml @@ -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)): diff --git a/host/stores/counter.ts b/host/stores/counter.ts new file mode 100644 index 0000000..7a77e58 --- /dev/null +++ b/host/stores/counter.ts @@ -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: 100 + }), + actions: { + increment() { + this.count += 1 + }, + + async asyncIncrement() { + console.log("asyncIncrement called") + await sleep(300) + this.count++ + return true + } + }, + getters: { + getCount: (state) => state.count + } +}) diff --git a/remote/components/RemoteContactRouter.vue b/remote/components/RemoteContactRouter.vue index 1a98963..a6d7b8f 100644 --- a/remote/components/RemoteContactRouter.vue +++ b/remote/components/RemoteContactRouter.vue @@ -1,24 +1,37 @@ -