fix: initialState存在非setup使用场景,不能使用provide/inject

packages/fes-builder-webpack/src/plugins/commands/buildDevUtils.js

@@ -51,7 +51,7 @@ export async function getBundleAndConfigs({ api }) {
                 return api.applyPlugins({
                     key: 'addHTMLHeadScripts',
                     type: api.ApplyPluginsType.add,
-                    initialState: [],
+                    initialValue: [],
                 });
             },
             publicPath: await api.applyPlugins({

packages/fes-plugin-layout/build.config.js

@@ -1,4 +1,3 @@
-
 module.exports = {
-    copy: ['runtime']
+    copy: ['runtime'],
 };

packages/fes-plugin-layout/src/runtime/helpers/getRuntimeConfig.js

@@ -1,7 +1,5 @@
-
-
 import { plugin, ApplyPluginsType } from '@@/core/coreExports';
-import { inject } from 'vue';
+import { initialState } from '@@/initialState';
 
 let runtimeConfig;
 
@@ -11,11 +9,11 @@ export default () => {
             key: 'layout',
             type: ApplyPluginsType.modify,
             initialValue: {
-                initialState: inject('initialState'),
+                initialState,
                 sidebar: true,
                 header: true,
-                logo: true
+                logo: true,
-            }
+            },
         });
     }
     return runtimeConfig;

packages/fes-plugin-model/src/runtime/models/initialState.js

@@ -1,5 +1,5 @@
-import { inject } from 'vue';
+import { initialState } from '@@/initialState';
 
 export default function initialStateModel() {
-    return inject('initialState');
+    return initialState;
 }

packages/fes-preset-built-in/package.json

@@ -32,6 +32,7 @@
     "express": "^4.17.3"
   },
   "peerDependencies": {
+    "vue": "^3.0.5",
     "@vue/compiler-sfc": "^3.0.5"
   },
   "typings": "./types.d.ts"

packages/fes-preset-built-in/src/plugins/generateFiles/fes/fes.tpl

@@ -7,15 +7,15 @@ import { plugin } from './core/plugin';
 import './core/pluginRegister';
 import { ApplyPluginsType } from '{{{ runtimePath }}}';
 import { getRoutes } from './core/routes/routes';
-
+import { updateInitialState } from './initialState';
-import DefaultContainer from './defaultContainer';
+import DefaultContainer from './defaultContainer.jsx';
 
 {{{ imports }}}
 
 {{{ entryCodeAhead }}}
 
 const renderClient = (opts = {}) => {
-    const { plugin, routes, rootElement, initialState } = opts;
+    const { plugin, routes, rootElement } = opts;
     const rootContainer = plugin.applyPlugins({
         type: ApplyPluginsType.modify,
         key: 'rootContainer',
@@ -27,8 +27,6 @@ const renderClient = (opts = {}) => {
     });
 
     const app = createApp(rootContainer);
-    // initialState是响应式的，后期可以更改
-    app.provide("initialState", reactive(initialState ?? {}));
 
     plugin.applyPlugins({
         key: 'onAppCreated',
@@ -51,19 +49,18 @@ const beforeRender = async ({rootElement}) => {
             action: null
         },
     });
-    let initialState = {};
     if (typeof beforeRenderConfig.action === "function") {
         const app = createApp(beforeRenderConfig.loading);
         app.mount(rootElement);
         try {
-            initialState = await beforeRenderConfig.action();
+            const initialState = await beforeRenderConfig.action();
+            updateInitialState(initialState || {})
         } catch(e){
             console.error(`[fes] beforeRender执行出现异常：`);
             console.error(e);
         }
         app.unmount();
     }
-    return initialState;
 };
 
 const getClientRender = (args = {}) => plugin.applyPlugins({
@@ -82,8 +79,8 @@ const getClientRender = (args = {}) => plugin.applyPlugins({
 {{/enableTitle}}
       },
     });
-    const initialState = await beforeRender(opts); 
+    await beforeRender(opts); 
-    return renderClient({...opts, initialState});
+    return renderClient(opts);
   },
   args,
 });

packages/fes-preset-built-in/src/plugins/generateFiles/fes/index.js

@@ -65,5 +65,10 @@ export default function (api) {
                 runtimePath,
             }),
         });
+
+        api.writeTmpFile({
+            path: `initialState.js`,
+            content: Mustache.render(readFileSync(join(__dirname, `./initialState.tpl`), 'utf-8')),
+        });
     });
 }

packages/fes-preset-built-in/src/plugins/generateFiles/fes/initialState.tpl

@@ -0,0 +1,7 @@
+import { reactive } from 'vue';
+
+export const initialState = reactive({});
+
+export const updateInitialState = (obj) => {
+    Object.assign(initialState, obj);
+};

packages/fes-template/src/components/UserCenter.vue

@@ -1,5 +1,5 @@
 <template>
-    <div class="user-center">{{initialState.userName}}</div>
+    <div class="user-center">{{ initialState.userName }}</div>
 </template>
 <script>
 import { useModel } from '@fesjs/fes';
@@ -8,9 +8,9 @@ export default {
     setup() {
         const initialState = useModel('@@initialState');
         return {
-            initialState
+            initialState,
         };
-    }
+    },
 };
 </script>
 <style lang="less">