使用React+TypeScript+MobX搭建项目遇报错：Store 'appState'不可用

嘿，这个问题我之前也碰到过！核心原因很简单：你已经定义了AppState store，但没有在React组件树的上层用MobX的Provider把这个store实例传递下去，所以当组件尝试注入appState时，MobX找不到它。

下面一步步帮你修复：

1. 确保实例化你的Store #

首先，你需要创建AppState的实例，而不是直接使用类本身。在你的入口文件（比如index.tsx）里添加：

import { AppState } from "./AppState";

// 实例化store
const appState = new AppState();

2. 用Provider包裹根组件 #

接下来，用mobx-react提供的Provider组件把整个应用包裹起来，把刚才创建的appState实例作为props传入：

import React from "react";
import ReactDOM from "react-dom/client";
import { Provider } from "mobx-react";
import { AppState } from "./AppState";
import App from "./App";

const appState = new AppState();

const root = ReactDOM.createRoot(
  document.getElementById("root") as HTMLElement
);

root.render(
  <Provider appState={appState}>
    <App />
  </Provider>
);

3. 在组件中正确注入并使用Store #

现在你可以在需要的组件里，通过inject获取store，再用observer让组件响应store的变化。比如你的App.tsx：

import React from "react";
import { inject, observer } from "mobx-react";
import { AppState } from "./AppState";

// 定义组件props的类型
interface AppProps {
  appState: AppState;
}

// 注入appState并包裹observer
const App = inject("appState")(
  observer((props: AppProps) => {
    return <h1>{props.appState.greeting}</h1>;
  })
);

export default App;

额外检查项 #

• 确认你已经正确安装了mobx和mobx-react依赖：npm install mobx mobx-react
• 如果你用的是MobX 6+，确保装饰器语法已经配置正确（比如在tsconfig.json中开启experimentalDecorators）

这样修改后，MobX就能找到你的appState store，错误应该就消失啦！

内容的提问来源于stack exchange，提问作者Englund0110