use React in Vue：如何在Vue组件中修改React组件里Mobx Store中的State值

现有Vue组件：Login.vue

<template>
<VueProviderForReact>
  <LoginVue ref="login"></LoginVue>
</VueProviderForReact>
</template>

<script lang="js">
import {useOspComponent} from '../react_app/ReactShell';
import Login from '@/login';
import {VueProviderForReact} from "../cross/crossProvider";

export default {
  name: 'login-vue',
  components: {
    VueProviderForReact,
    LoginVue: useOspComponent(Login)
  },
  mounted(){
    console.log(this.$refs.login.__veauryReactRef__)
  }
}
</script>

其中import Login from '@/login';引入的一个React组件Login，其中使用了Mobx的State：

const Login = inject(
    'AppState',
    'UserStore'
)(
    observer((props) => {
        const {
            AppState: { setLastLogin, lang, setIsLogout },
            UserStore: { token, setUserName, setUserCaption },
            intl
        } = props;
................

Mobx相关Store是在import {useOspComponent} from '../react_app/ReactShell';代码中注入的： AppState, UserStore等都来自osp-react-base包导出的store

import { Provider } from 'mobx-react';
import { inject, observer } from 'mobx-react';
import React, { useEffect, useMemo } from 'react';
import { ConfigProvider } from 'antd';
import { IntlProvider } from 'react-intl';
import { store, loadConfig, tokenProduce, LOCALSTORAGE_TYPES } from 'osp-react-base';
import { initAppStaticConfig } from './config/InitAppStaticConfig';
import { getIntl, getIntlLocale, getAntdLocale, getInternational } from './locale';
import { applyPureReactInVue } from "veaury";

function withOspStore(OspComponent){
    return class extends React.Component {
        constructor(props) {
            super(props);
        }

        render() {
            return (
                <Provider {...store}>
                    <OspComponent />
                </Provider>
            );
        }
    }
}

function withOspComponent(OspComponent){
    return inject(
        'SettingStore',
        'TagsViewStore',
        'AppState',
        'UserStore',
        'DesignerStore'
    )(
        observer((props) => {
            const {
                UserStore: { token, setToken },
                AppState: { lang, langHasInited }
            } = props;
            return (
                <IntlProvider locale={getInternational(lang)} messages={intlLocale}>
                    <ConfigProvider locale={antdLocale}>
                        {(!LocationUtil.isFormPlayType()) || (LocationUtil.isFormPlayType() && token) ? (
                            <OspComponent {...props}></OspComponent>
                        ) : null}
                    </ConfigProvider>
                </IntlProvider>
            );
        })
    );
}

function useOspComponent(OspComponent){
    return applyPureReactInVue(withOspStore(withOspComponent(OspComponent)));
}

export {useOspComponent, withOspStore, withOspComponent};

是否有一种机制，可以在Vue组件中操作Mobx Store的数据

gloriasoft / veaury

use React in Vue：如何在Vue组件中修改React组件里Mobx Store中的State值 #33