Skip to content

Commit 2972252

Browse files
committed
docs: ✏️ 调整有关 modifyClientRenderOpts 的说明
1 parent 32635cf commit 2972252

File tree

4 files changed

+435
-440
lines changed

4 files changed

+435
-440
lines changed

src/api/plugin-api.md

Lines changed: 0 additions & 213 deletions
Original file line numberDiff line numberDiff line change
@@ -595,219 +595,6 @@ api.modifyBundlerChain((chain, utils) => {
595595
});
596596
```
597597

598-
### modifyClientRenderOpts
599-
600-
`modifyClientRenderOpts` is a runtime plugin hook provided by WinJS for modifying render options before client-side rendering. Through this hook, when using `Vue2`, you can customize core instances such as router, store, pinia, etc., to achieve highly customized application initialization.
601-
602-
#### Basic Usage
603-
604-
Export the `modifyClientRenderOpts` function in `src/app.js`:
605-
606-
```javascript
607-
export function modifyClientRenderOpts(memo) {
608-
return {
609-
...memo,
610-
// Add or modify render options here
611-
};
612-
}
613-
```
614-
615-
#### Parameters: memo Object
616-
617-
`memo` is the passed render options object, containing the following properties:
618-
619-
| Property | Type | Description |
620-
|----------|------|-------------|
621-
| `routes` | `IRoutesById` | WinJS route configuration object (key-value format) |
622-
| `routeComponents` | `IRouteComponents` | Route component mapping table |
623-
| `pluginManager` | `PluginManager` | Plugin manager instance |
624-
| `rootElement` | `HTMLElement` | Mount root element |
625-
| `history` | `History` | Route history object (Vue Router 3.x is `{ base, mode }`) |
626-
| `basename` | `string` | Route base path |
627-
| `publicPath` | `string` | Public resource path |
628-
| `runtimePublicPath` | `boolean` | Whether to use runtime public path |
629-
630-
#### Return Value
631-
632-
Returns a modified render options object that must include all original properties of `memo`.
633-
634-
#### Usage Scenarios
635-
636-
##### Scenario 1: Pass Custom Router Instance
637-
638-
**Use Case**: Need complete control over router instance, micro-frontend scenarios, using third-party routing libraries (Vue Router 3.x, Vue 2.x)
639-
640-
```javascript
641-
import customRouter from './router/index';
642-
643-
export function modifyClientRenderOpts(memo) {
644-
return {
645-
...memo,
646-
router: customRouter
647-
};
648-
}
649-
```
650-
651-
**Create custom router**:
652-
653-
```javascript
654-
// src/router/index.js
655-
import Vue from 'vue';
656-
import Router from 'vue-router';
657-
import { routes } from './routes';
658-
659-
// Must register plugin first
660-
Vue.use(Router);
661-
662-
const router = new Router({
663-
mode: 'hash',
664-
routes,
665-
scrollBehavior(to, from, savedPosition) {
666-
return savedPosition || { x: 0, y: 0 };
667-
}
668-
});
669-
670-
// Add global route guards
671-
router.beforeEach((to, from, next) => {
672-
// Permission verification logic
673-
next();
674-
});
675-
676-
export default router;
677-
```
678-
679-
##### Scenario 2: Pass Vuex Store
680-
681-
**Use Case**: Using Vuex for state management (Vue 2.x)
682-
683-
```javascript
684-
import store from './stores';
685-
686-
export function modifyClientRenderOpts(memo) {
687-
return {
688-
...memo,
689-
store: store
690-
};
691-
}
692-
```
693-
694-
**Create Vuex store**:
695-
696-
```javascript
697-
// src/stores/index.js
698-
import Vue from 'vue';
699-
import Vuex from 'vuex';
700-
701-
Vue.use(Vuex);
702-
703-
export default new Vuex.Store({
704-
state: {
705-
user: null,
706-
token: ''
707-
},
708-
mutations: {
709-
SET_USER(state, user) {
710-
state.user = user;
711-
},
712-
SET_TOKEN(state, token) {
713-
state.token = token;
714-
}
715-
},
716-
actions: {
717-
login({ commit }, { username, password }) {
718-
// Login logic
719-
return api.login({ username, password }).then(res => {
720-
commit('SET_USER', res.user);
721-
commit('SET_TOKEN', res.token);
722-
});
723-
}
724-
}
725-
});
726-
```
727-
728-
##### Scenario 3: Pass Pinia
729-
730-
**Use Case**: Using Pinia for state management (Vue 2.7+)
731-
732-
```javascript
733-
import { createPinia } from 'pinia';
734-
735-
export function modifyClientRenderOpts(memo) {
736-
return {
737-
...memo,
738-
pinia: createPinia()
739-
};
740-
}
741-
```
742-
743-
##### Scenario 4: Pass Multiple Instances Simultaneously
744-
745-
**Use Case**: Need to customize both router and store
746-
747-
```javascript
748-
import customRouter from './router/index';
749-
import store from './stores';
750-
751-
export function modifyClientRenderOpts(memo) {
752-
return {
753-
...memo,
754-
router: customRouter,
755-
store: store
756-
};
757-
}
758-
```
759-
760-
##### Scenario 5: Modify Other Render Options
761-
762-
**Use Case**: Customize root element, modify base path, etc.
763-
764-
```javascript
765-
export function modifyClientRenderOpts(memo) {
766-
return {
767-
...memo,
768-
// Customize root element
769-
rootElement: document.getElementById('app'),
770-
771-
// Modify base path
772-
basename: '/my-app/',
773-
774-
// Add custom properties
775-
customOption: 'custom-value'
776-
};
777-
}
778-
```
779-
780-
#### Recommended Approach (Direct Pass)
781-
782-
```javascript
783-
export function modifyClientRenderOpts(memo) {
784-
return {
785-
...memo,
786-
router: customRouter,
787-
store: store,
788-
pinia: createPinia()
789-
};
790-
}
791-
```
792-
793-
#### Compatible Approach (Via Callback)
794-
795-
```javascript
796-
export function modifyClientRenderOpts(memo) {
797-
const callback = () => {
798-
return {
799-
store: store,
800-
pinia: createPinia()
801-
};
802-
};
803-
return {
804-
...memo,
805-
router: customRouter,
806-
callback
807-
};
808-
}
809-
```
810-
811598
### modifyConfig
812599

813600
Modify configuration. Compared to user configuration, this is the final configuration passed to WinJS. The passed `fn` receives config as the first parameter and returns it. Additionally, `fn` can receive `{ paths }` as the second parameter. `paths` contains various paths of WinJS.

0 commit comments

Comments
 (0)