与模块联盟共享数据

Question

我正在尝试构建 vue.js、typescript、vite 应用程序。我还使用 vite-module-federation-plugin 通过不同的应用程序共享代码。我想知道是否有一种方法可以与模块联合共享实际数据或仅共享代码？ 例如，如果我有一个商店（Pinia 商店）并且里面有一些东西，有没有一种方法可以通过应用程序共享它，并使它们能够修改数据并将数据添加到该商店中，并在上显示商店的更新数据所有应用程序？

通过模块联合，我能够共享商店的代码并使其可用于所有应用程序，但不能用于商店本身的实例。商店初始化后，商店上的任何更新都将仅在对其进行更改的应用程序上可见。

代码共享示例： 在主机应用程序中：

import { defineConfig } from 'vite';
import Vue from '@vitejs/plugin-vue';
import { ModuleFederationPlugin } from '@module-federation/next/vite';

export default defineConfig({
  plugins: [
    Vue(),
    ModuleFederationPlugin({
      name: 'app1',
      filename: 'remoteEntry.js',
      exposes: {
        './CounterStore': './src/store/counterStore.ts',
      },
    }),
  ],
});

在消费应用程序中：

import { defineConfig } from 'vite';
import Vue from '@vitejs/plugin-vue';
import { ModuleFederationPlugin } from '@module-federation/next/vite';

export default defineConfig({
  plugins: [
    Vue(),
    ModuleFederationPlugin({
      name: 'app2',
      filename: 'remoteEntry.js',
      remotes: {
        app1: 'app1@http://localhost:3001/remoteEntry.js',
      },
    }),
  ],
});

动态加载组件后，我得到了解释的结果。

Answer 1

来自模块联合文档：

模块联合是一个允许开发者共享代码的概念 以及跨多个 JavaScript 应用程序的资源，或者 微前端。

没办法。您只能共享代码和资产，而不能共享状态。

Answer 2

您可能希望将每次更改时的状态（通过任何应用程序）转储到浏览器的本地存储或会话存储中。