# 康复游戏入口界面 ## 配置相关 ### 训练部位 ```js export const TRAIN_SITE_LIST = [ { id: '1', name: 'UpperLimb', text: '上肢训练', order: 1 }, { id: '2', name: 'Hand', text: '手部训练', order: 2 }, { id: '3', name: 'LowerLimb', text: '下肢训练', order: 3 }, ]; ``` ### 游戏列表 ```js // 游戏列表 export const GAME_LIST = [ { id: '1', name: 'balloon', text: '踩气球', order: 1, site: 'LowerLimb' }, { id: '2', name: 'tomato', text: '番茄炒蛋', order: 2, site: 'Hand' }, { id: '3', name: 'hurdle', text: '跨栏', order: 3, site: 'LowerLimb' }, { id: '4', name: 'basketball', text: '投篮', order: 4, site: 'UpperLimb' }, { id: '5', name: 'bird', text: '鸟妈妈回家', order: 5, site: 'UpperLimb' }, { id: '6', name: 'bomb', text: '太空战机', order: 6, site: 'Hand' }, { id: '7', name: 'football', text: '踢足球', order: 7, site: 'LowerLimb' }, { id: '8', name: 'apple', text: '摘苹果', order: 8, site: 'Hand' }, { id: '9', name: 'orange-juice', text: '挤橙汁', order: 9, site: 'Hand' }, { id: '10', name: 'golf', text: '高尔夫', order: 10, site: 'UpperLimb' }, { id: '11', name: 'fish', text: '大鱼吃小鱼', order: 11, site: 'Hand' }, { id: '12', name: 'radish', text: '拔萝卜', order: 12, site: 'UpperLimb' }, ]; ``` ## 使用方法 store里记录了selectedSite 当前训练部位的name值 getters里根据selectedSite的值计算返回当前训练部位对应的游戏列表 点击训练部位 更新selectedSite的值 ```js export default createStore({ state: { selectedSite: '' }, getters: { /** * 当前选中的训练部位下的 游戏列表 * @param {string} selectedSite * @returns {{site: string, name: string, id: string, text: string, order: number}[]|*[]} */ selectedGames({ selectedSite }) { return getGamesBySite(selectedSite) || []; }, }, mutations: { /** * 设置选中的训练部位 * @param state * @param {string} site */ setSelectedSite(state, site) { state.selectedSite = site; }, }, actions: {}, }); ```