qiankun框架如何共用一个vuex
时间: 2023-07-07 14:35:39 浏览: 51
qiankun框架可以通过将子应用的vuex实例作为主应用vuex实例的一个模块来实现共用。具体步骤如下:
1. 在主应用的vuex实例中,使用`registerModule`方法注册子应用的vuex实例为一个模块,可以指定模块名称和命名空间。
```javascript
import { registerMicroApps, runAfterFirstMounted, setDefaultMountApp, start } from 'qiankun';
import store from './store';
registerMicroApps([
{
name: 'sub-app',
entry: '//localhost:8080',
container: '#subapp-container',
activeRule: '/sub-app',
},
]);
store.registerModule('subAppStore', {
state: {},
mutations: {},
actions: {},
getters: {},
});
```
2. 在子应用的vuex实例中,导出vuex实例。
```javascript
import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
export default new Vuex.Store({
state: {},
mutations: {},
actions: {},
getters: {},
});
```
3. 在子应用的入口文件中,将子应用的vuex实例作为参数传递给子应用的渲染函数。
```javascript
import Vue from 'vue';
import App from './App.vue';
import store from './store';
Vue.config.productionTip = false;
function render() {
new Vue({
store,
render: h => h(App),
}).$mount('#app');
}
if (window.__POWERED_BY_QIANKUN__) {
// 动态添加publicPath,使子应用可以正确加载静态资源
__webpack_public_path__ = window.__INJECTED_PUBLIC_PATH_BY_QIANKUN__;
} else {
render();
}
```
这样,主应用和子应用之间就可以共用一个vuex实例了。在主应用中使用`store.state.subAppStore`访问子应用的vuex状态,在子应用中使用`this.$store`访问自己的vuex状态。