How to use the mobx-react-lite.useLocalStore function in mobx-react-lite

export default function useStore({ defaultTab }) {
  return useLocalStore(() => ({
    tabKey: defaultTab,

    setTabKey(data) {
      this.tabKey = data;
    },
    get getTabKey() {
      return this.tabKey;
    },
    hasPermission: false,
    setPermission(data) {
      this.hasPermission = data;
    },
    get getPermission() {
      return this.hasPermission;
    },

const AddProfileButton = () => {
  const emptyProfile: Profile = {
    name: '',
    tags: [],
    endpoints: [],
  };
  const store = useLocalStore(() => ({
    visiable: false,
    profile: emptyProfile,
    resolve: (profile: Profile) => profiles.add(profile),
  }));
  const onClick = () => {
    runInAction(() => {
      store.profile = emptyProfile;
      store.visiable = true;
    });
  };
  return (
    <div>
      <button size="small"></button>
      
    </div>
  );

export default function useStore() {
  return useLocalStore(() => ({

  }));
}

export default function useStore() {
  return useLocalStore(() => ({
    checkEffect(projectId, id) {
      return axios.post(`/devops/v1/projects/${projectId}/app_service_instances/list_running_instance?env_id=${id}&page=1&size=10`, JSON.stringify({ params: [], searchParam: {} }));
    },

    effectEnv(projectId, id, target) {
      return axios.put(`/devops/v1/projects/${projectId}/envs/${id}/active?active=${target}`);
    },

    deleteEnv(projectId, id) {
      return axios.delete(`/devops/v1/projects/${projectId}/envs/${id}`);
    },
  }));
}

export const CellForm = observer((props: CellFormProps) => {
  const store = useLocalStore(() => {
    autorun(() => {
      const cell = props.connection.cell;
      if (!cell.name) {
        runInAction(() => {
          store.value = '';
        });
        return;
      }
      const data = new HumanReadableData({ data: cell.data, encoding: store.encoding });
      const text = `${cell.name}: ${cell.data.length} bytes\n\n${data.text}`;
      runInAction(() => {
        store.value = text;
      });
    });
    return { value: '', encoding: defaultDecoderSelectOption.name };
  });

export default function useStore() {
  return useLocalStore(() => ({

    appService: [],
    setAppService(data) {
      this.appService = data;
    },
    get getAppService() {
      return this.appService.slice();
    },

    configValue: '',
    setConfigValue(data) {
      this.configValue = data;
    },
    get getConfigValue() {
      return this.configValue;
    },

export default function useStore() {
  return useLocalStore(() => ({
    navBounds: {},
    setNavBounds(data) {
      this.navBounds = data;
    },
    get getNavBounds() {
      return this.navBounds;
    },

    deleteArr: [],
    setDeleteArr(data) {
      this.deleteArr = data;
    },
    get getDeleteArr() {
      return this.deleteArr;
    },

export default function useStore() {
  return useLocalStore(() => ({
    tabKey: 'cases',
    detailLoading: false,
    detail: {},
    valueLoading: true,
    upgradeValue: {},

    setTabKey(data) {
      this.tabKey = data;
    },
    get getTabKey() {
      return this.tabKey;
    },
    setDetailLoading(data) {
      this.detailLoading = data;
    },
    get getDetailLoading() {

export default function useStore() {
  return useLocalStore(() => ({
    singleData: {},
    setSingleData(data) {
      this.singleData = data;
    },
    get getSingleData() {
      return this.singleData;
    },

    async loadSingleData(projectId, id) {
      try {
        const res = await axios.get(`/devops/v1/projects/${projectId}/customize_resource/${id}`);
        if (handlePromptError(res)) {
          this.setSingleData(res);
        }
      } catch (e) {
        Choerodon.handleResponseError(e);

export default function useStore() {
  return useLocalStore(() => ({
    navBounds: {},
    setNavBounds(data) {
      this.navBounds = data;
    },
    get getNavBounds() {
      return this.navBounds;
    },
    checkClusterName({ projectId, clusterName }) {
      return axios.get(`/devops/v1/projects/${projectId}/clusters/check_name?name=${clusterName}`);
    },
    checkClusterCode({ projectId, clusterCode }) {
      return axios.get(`/devops/v1/projects/${projectId}/clusters/check_code?code=${clusterCode}`);
    },
    createCluster({ projectId, ...rest }) {
      return axios.post(`/devops/v1/projects/${projectId}/clusters`, JSON.stringify(rest));
    },