vue实现答题小系统

前言

之前在结束vue学习的时候准备着找一个小的案例做一下的，但是当时有事情又耽搁了，今天看了一个还不错的案例，就仿照他的功能自己写了一个，因为主要是体会vue功能，时间也有点赶，在样式上就写得比较粗糙，功能也比较局限。 项目地址

功能项目介绍

功能

• 主页

  路由起点，页面提供点击进入答题界面按钮

• 答题页 从vuex文件提取题目显示，通过索引变换切换不同题目，当到最后一题时通过索引判断下一题会显示为交卷然后路由到总分页面

项目分析

基于vuex、router来实现的

整个分三个页面然后因为内容比较少所以小编都是共用一个子组件(show)通过v-if显示不同页面内容。

资源目录：

项目整体就是操作这些全局变量以及方法取实现需求，

const ADD_ITEMNUM = 'ADD_ITEMNUM'
const REMBER_ANSWER = 'REMBER_ANSWER'
const INITIALIZE_DATA = 'INITIALIZE_DATA'
const COMPUTED_SCORE = 'COMPUTED_SCORE'
export default new Vuex.Store({
    state: {
        itemNum: 1, // 第几题
        result: [], // 这个数组用来记录
        totleScore: 0,
        rightResult:[1, 1, 1],
        questions: [太多了就不放这了]
    },
    mutations: {
        //点击进入下一题
        [ADD_ITEMNUM](state) {
            state.itemNum ++;
        },
        //记录答案
        [REMBER_ANSWER](state, id) {
            state.result.push(id);
        },
        
        // 初始化信息
        [INITIALIZE_DATA](state) {
            state.itemNum = 1;
            state.result = [];
            state.totleScore = 0
        },
        [COMPUTED_SCORE](state) {
            state.result.forEach((item, index) => {
                if (item == state.rightResult[index]) {
                    state.totleScore += 20;
                }
            })
        }
    },
    actions: {
        addNum({ commit, state }, id) {
            //点击下一题，记录答案id，判断是否是最后一题，如果不是则跳转下一题
            commit('REMBER_ANSWER', id);
            if (state.itemNum < state.problems.length) {
                commit('ADD_ITEMNUM');
            }
        },
        //初始化信息
        initializeData({ commit }) {
            commit('INITIALIZE_DATA');
        },
        // 计算总分
        countScore({ commit }) {
            commit('COMPUTED_SCORE');
        }
    }
})

这边只是小编自行的一个记录，详细的代码中基本上都注释了，比较好的一个vue基础案例。