@/store#RootState TypeScript Examples

store: Module<ToolbarState, RootState> = {
  namespaced: true,
  state,
  getters,
  mutations,
  actions,
  modules: {
    nature,
    tool3DTile,
    other,
    draw,
    measure,
    imagery,
  },
}

export default function () {
  function hideAllLayout(store: Store<RootState>) {
    store.dispatch(
      `jtCesiumVue/layout/${LayoutActionTypes.SET_SHOW_TOOLBAR}`,
      false
    )
    store.dispatch(
      `jtCesiumVue/layout/${LayoutActionTypes.SET_SHOW_BROWSER_PANEL}`,
      false
    )
    store.dispatch(
      `jtCesiumVue/layout/${LayoutActionTypes.SET_SHOW_SETTING_BUTTON}`,
      false
    )
  }

  function defaultLayout(store: Store<RootState>) {
    store.dispatch(
      `jtCesiumVue/layout/${LayoutActionTypes.SET_SHOW_TOOLBAR}`,
      true
    )
    store.dispatch(
      `jtCesiumVue/layout/${LayoutActionTypes.SET_SHOW_BROWSER_PANEL}`,
      true
    )
    store.dispatch(
      `jtCesiumVue/layout/${LayoutActionTypes.SET_SHOW_SETTING_BUTTON}`,
      false
    )
  }

  return {
    hideAllLayout,
    defaultLayout,
  }
}

actions: ActionTree<Tool3DTileState, RootState> = {
  async [Tool3DTileActionTypes.RESET_STATE]({ commit }) {
    commit(Tool3DTileMutationTypes.RESET_STATE)
  },

  async [Tool3DTileActionTypes.SET_HIGHLIGHT_3DTILE_FEATURE_ACTIVE](
    { commit },
    payload: boolean
  ) {
    commit(Tool3DTileMutationTypes.SET_HIGHLIGHT_3DTILE_FEATURE_ACTIVE, payload)
  },

  async [Tool3DTileActionTypes.SET_HOVER_CLASSIFICATION_ACTIVE](
    { commit },
    payload: boolean
  ) {
    commit(Tool3DTileMutationTypes.SET_HOVER_CLASSIFICATION_ACTIVE, payload)
  },

  async [Tool3DTileActionTypes.SET_CLICK_CLASSIFICATION_ACTIVE](
    { commit },
    payload: boolean
  ) {
    commit(Tool3DTileMutationTypes.SET_CLICK_CLASSIFICATION_ACTIVE, payload)
  },
}

actions: ActionTree<OtherState, RootState> = {
  async [OtherActionTypes.RESET_STATE]({ commit }) {
    commit(OtherMutationTypes.RESET_STATE)
  },

  // other
  async [OtherActionTypes.SWITCH_DEPTH_TEST_AGAINST_TERRAIN](
    { commit, state },
    options: ClickHandlerOption
  ) {
    const { viewer } = options
    if (!viewer) {
      return
    }
    const switchTo = !state.depthTestAgainstTerrain
    viewer.scene.globe.depthTestAgainstTerrain = switchTo
    commit(OtherMutationTypes.SET_DEPTH_TEST_AGAINST_TERRAIN, switchTo)
  },
}

actions: ActionTree<MeasureState, RootState> = {
  async [MeasureActionTypes.RESET_STATE]({ commit }) {
    commit(MeasureMutationTypes.RESET_STATE)
  },

  // measure
  async [MeasureActionTypes.SET_MEASURE_POINT_ACTIVE](
    { commit },
    payload: boolean
  ) {
    commit(MeasureMutationTypes.SET_MEASURE_POINT_ACTIVE, payload)
  },

  async [MeasureActionTypes.SET_MEASURE_POLYLINE_ACTIVE](
    { commit },
    payload: boolean
  ) {
    commit(MeasureMutationTypes.SET_MEASURE_POLYLINE_ACTIVE, payload)
  },

  async [MeasureActionTypes.SET_MEASURE_POLYGON_ACTIVE](
    { commit },
    payload: boolean
  ) {
    commit(MeasureMutationTypes.SET_MEASURE_POLYGON_ACTIVE, payload)
  },
}

actions: ActionTree<ImageryState, RootState> = {
  async [ImageryActionTypes.RESET_STATE]({ commit }) {
    commit(ImageryMutationTypes.RESET_STATE)
  },

  // imagery
  async [ImageryActionTypes.SET_SPLIT]({ commit, state }, payload: SplitType) {
    commit(ImageryMutationTypes.SET_SPLIT, payload)
  },
}

actions: ActionTree<DrawState, RootState> = {
  async [DrawActionTypes.RESET_STATE]({ commit }) {
    commit(DrawMutationTypes.RESET_STATE)
  },

  // draw
  async [DrawActionTypes.SET_DRAW_POINT_ACTIVE]({ commit }, payload: boolean) {
    commit(DrawMutationTypes.SET_DRAW_POINT_ACTIVE, payload)
  },

  async [DrawActionTypes.SET_DRAW_POLYLINE_ACTIVE](
    { commit },
    payload: boolean
  ) {
    commit(DrawMutationTypes.SET_DRAW_POLYLINE_ACTIVE, payload)
  },

  async [DrawActionTypes.SET_DRAW_POLYGON_ACTIVE](
    { commit },
    payload: boolean
  ) {
    commit(DrawMutationTypes.SET_DRAW_POLYGON_ACTIVE, payload)
  },
}

GameOver: FC = () => {
  const { isGameOver, isWin } = useSelector(
    ({ game: { isGameOver, isWin } }: RootState) => ({
      isGameOver,
      isWin,
    })
  );

  const dispatch = useDispatch();

  const onReset = useCallback(
    () => dispatch(actions.reset()),
    // Stryker disable next-line ArrayDeclaration
    []
  );

  return (
    <>{isGameOver && <GameOverComponent onClick={onReset} isWin={isWin} />}</>
  );
}

actions: ActionTree<State, RootState> = {
  async [ToolbarActionTypes.RESET_STATE]({ commit }) {
    commit(ToolbarMutationTypes.RESET_STATE)
  },

  async [ToolbarActionTypes.SET_VISIBLE]({ commit }, payload: boolean) {
    commit(ToolbarMutationTypes.SET_VISIBLE, payload)
  },

  async [ToolbarActionTypes.SET_DROP_DOWN]({ commit }, payload: DropdownState) {
    commit(ToolbarMutationTypes.SET_DROP_DOWN, payload)
  },

  // elevation contour
  async [ToolbarActionTypes.SET_ELEVATION_CONTURE_ACTIVE](
    { commit },
    payload: boolean
  ) {
    commit(ToolbarMutationTypes.SET_ELEVATION_CONTURE_ACTIVE, payload)
  },

  // terrain sampling
  async [ToolbarActionTypes.SET_TERRAIN_SAMPLING](
    { commit },
    payload: TerrainSamplingState
  ) {
    commit(ToolbarMutationTypes.SET_TERRAIN_SAMPLING, payload)
  },
}

actions: ActionTree<State, RootState> = {
  async [LocationBarActionTypes.RESET_STATE]({ commit }) {
    commit(LocationBarMutationTypes.RESET_STATE)
  },

  async [LocationBarActionTypes.SET_SHOW_CAMERA_LOCATION](
    { commit },
    payload: boolean
  ) {
    commit(LocationBarMutationTypes.SET_SHOW_CAMERA_LOCATION, payload)
  },

  async [LocationBarActionTypes.SET_SHOW_MOUSE_LOCATION](
    { commit },
    payload: boolean
  ) {
    commit(LocationBarMutationTypes.SET_SHOW_MOUSE_LOCATION, payload)
  },

  async [LocationBarActionTypes.SET_SHOW_FPS]({ commit }, payload: boolean) {
    commit(LocationBarMutationTypes.SET_SHOW_FPS, payload)
  },
}

actions: ActionTree<JTPrimitiveState, RootState> = {
  async [JTPrimitiveActionTypes.RESET_STATE]({ commit }) {
    commit(JTPrimitiveMutationTypes.RESET_STATE)
  },

  // Primitive
  async [JTPrimitiveActionTypes.SYNC_JTPRIMITIVES](
    { commit, state },
    payload: Cesium.Viewer
  ) {
    if (!payload) {
      return
    }
    const pris = payload.jt?.primitiveManager.syncJTPrimitives()

    commit(JTPrimitiveMutationTypes.SYNC_JTPRIMITIVES, pris)
  },
}

Grid: FC = () => {
  const { playerField } = useSelector(
    ({ game: { playerField } }: RootState) => ({
      playerField,
    })
  );

  const dispatch = useDispatch();

  const onClick = useCallback(
    (coords: Coords) => {
      dispatch(actions.openCell(coords));
      dispatch(runTimer());
    },
    // Stryker disable next-line ArrayDeclaration
    []
  );

  const onContextMenu = useCallback(
    (coords: Coords) => {
      dispatch(actions.setFlag(coords));
      dispatch(runTimer());
    },
    // Stryker disable next-line ArrayDeclaration
    []
  );

  return (
    <GridComponent onClick={onClick} onContextMenu={onContextMenu}>
      {playerField}
    </GridComponent>
  );
}

recursiveUpdate =
  (prevGameField: Field): ThunkAction<void, RootState, unknown, AnyAction> =>
  (dispatch, getState) =>
    setTimeout(() => {
      const { isGameStarted, isTimerRunning, gameField } = getState().game;
      const isTheSameGame = gameField === prevGameField;

      if (isGameStarted && isTimerRunning && isTheSameGame) {
        dispatch(actions.updateTime());
        dispatch(recursiveUpdate(gameField));
      }
    }, 1000)

store: Module<CesiumDataState, RootState> = {
  namespaced: true,
  state,
  getters,
  mutations,
  actions,
  modules: {
    jtPrimitive,
  },
}

runTimer =
  (): ThunkAction<void, RootState, unknown, AnyAction> =>
  (dispatch, getState) => {
    const { isGameStarted, isTimerRunning, gameField } = getState().game;
    if (isGameStarted && !isTimerRunning) {
      dispatch(actions.setTimerActive());
      dispatch(recursiveUpdate(gameField));
    }
  }

loadDefault3DTiles = (viewer: Viewer, store: Store<RootState>): void => {
  const jtPrimitives =
    store.state.jtCesiumVue.cesiumData.jtPrimitive.jtPrimitives
  const len = jtPrimitives.length
  for (let i = 0; i < len; ++i) {
    const jtPri = jtPrimitives[i]
    if (jtPri.name !== '成都建筑群') {
      continue
    }

    const pri = viewer?.jt?.primitiveManager.getPrimitiveByJTPrimitiveIndex(i)
    if (!pri.show) {
      pri.show = true
      store.dispatch(
        `jtCesiumVue/cesiumData/jtPrimitive/${JTPrimitiveActionTypes.SYNC_JTPRIMITIVES}`,
        viewer
      )
    }
    break
  }
}

store: Module<JTCesiumVueState, RootState> = {
  namespaced: true,
  modules: {
    locationbar,
    layout,
    toolbar,
    cesiumData,
  },
}

Scoreboard: FC = () => {
  const [searchParams, setSearchParams] = useSearchParams();
  const dispatch = useDispatch();

  useEffect(() => {
    const urlLevelParam = (searchParams.get('level') ||
      undefined) as LevelNames;
    if (urlLevelParam) {
      dispatch(actions.changeLevel(urlLevelParam as LevelNames));
    }
  }, []);

  const { level, time, bombs, flagCounter } = useSelector(
    ({ game: { level, time, bombs, flagCounter } }: RootState) => ({
      level,
      time,
      bombs,
      flagCounter,
    })
  );

  const onChangeLevel = useCallback(
    ({ target: { value: level } }: React.ChangeEvent<HTMLSelectElement>) => {
      setSearchParams({ level });
      dispatch(actions.changeLevel(level as LevelNames));
    },
    // Stryker disable next-line ArrayDeclaration
    []
  );

  const onReset = useCallback(
    () => dispatch(actions.reset()),
    // Stryker disable next-line ArrayDeclaration
    []
  );

  return (
    <ScoreboardComponent
      time={String(time)}
      bombs={String(bombs - flagCounter)}
      levels={GameLevels as unknown as string[]}
      defaultLevel={level}
      onChangeLevel={onChangeLevel}
      onReset={onReset}
    />
  );
}

store: Module<OtherState, RootState> = {
  namespaced: true,
  state,
  getters,
  mutations,
  actions,
}

getters: GetterTree<OtherState, RootState> = {
  // getTestStr: (state) => state.test.toString() + 'str',
}

getters: GetterTree<Tool3DTileState, RootState> = {
  // getTestStr: (state) => state.test.toString() + 'str',
}

store: Module<Tool3DTileState, RootState> = {
  namespaced: true,
  state,
  getters,
  mutations,
  actions,
}

store: Module<NatureState, RootState> = {
  namespaced: true,
  state,
  mutations,
  actions,
}

store: Module<MeasureState, RootState> = {
  namespaced: true,
  state,
  getters,
  mutations,
  actions,
}

actions: ActionTree<State, RootState> = {
  async [TemplateActionTypes.RESET_STATE]({ commit }) {
    commit(TemplateMutationTypes.RESET_STATE)
  },
}

getters: GetterTree<MeasureState, RootState> = {
  // getTestStr: (state) => state.test.toString() + 'str',
}

getters: GetterTree<State, RootState> = {
  // getTestStr: (state) => state.test.toString() + 'str',
}

store: Module<ImageryState, RootState> = {
  namespaced: true,
  state,
  getters,
  mutations,
  actions,
}

getters: GetterTree<ImageryState, RootState> = {
  // getTestStr: (state) => state.test.toString() + 'str',
}