Vue scaffolding implementation paper page

page

store/modules/moduleA

• Modularize store in moduleA
• Put the variable subjectList in state, and update the subjectList via mutations
• The getSubjectList in Mutations is activated via mapMutations in home. vue to update the subjectList

import '@/mock'
export default {
    namespaced: true,
    state: {
        subjectList: []
    },
    mutations: {
        getSubjectList(state, payload) {
            state.subjectList = payload
        }
    }
}
Copy the code

store/index.js

import Vuex from 'vuex'
import Vue from 'vue'
Vue.use(Vuex)
import user from './modules/user'
import moduleA from './modules/moduleA'
let store =new Vuex.Store({
    modules:{
        moduleA
    }
})
export default store
Copy the code

Home.vue

• FmtSubjectType, fmtOrder2ABC as the filter, and checkSubjectType as the method are stored in Vue. Mixin in the index.js file
• Whether or not the div exists is controlled by the result of the checkSubjectType method

<template>
  <div class="main">
    <ul>
      <li class="item" v-for="(item, i) in subjectList" :key="i">
        <h4>{{i+1}}.[{{item.type|fmtSubjectType}}] {{item.title}}</h4>
        <div style="color:#888; font-size:14px">
          {{item.author}}{{item.createDate}}
        </div>
        <fieldset style="padding:0 10px;" v-if="checkSubjectType(item.type)"> <legend > option </legend> <div v-for="(choice, j) in item.choice" :key="j">
            {{j|fmtOrder2ABC}}  {{choice.answer}}
          </div>
        </fieldset>
        <div v-if="checkSubjectType(item.type)"> answer: {{item. Answer}} < / div > < div > analytic: {{item. Desc}} < / div > < / li > < / ul > < / div > < / template > < script > import'@/mock'
import {createNamespacedHelpers} from 'vuex'
let {mapState,mapMutations,mapActions}= createNamespacedHelpers('moduleA')
export default {
  async created() {
    let {subjectList} = await this.$get('/subjectList') this.getSubjectList(subjectList) }, computed: { ... mapState(['subjectList']) }, methods: { ... mapMutations(['getSubjectList']),}}; </script> <style scoped lang='scss'>
.main{
  border: 1px solid red;
  .item{
    padding: 20px 10px;
    border-bottom: 1px solid #ccc;
  }
}
</style>
Copy the code

mixin/index.js

• By cuttingIn BASE_URLTo switch interfaces, the URL in AXIos is throughBASE_URLJoining together of

import axios from 'axios'
import Vue from 'vue'
import { BASE_URL } from '@/config'
import {SUBJECT_TYPE} from '@/config/enum'
Vue.mixin({
    methods: {
       async $get(url,params){
           let {data} = await axios.get(BASE_URL+url,{params})
            return data
        },
        checkSubjectType(type) {return type===SUBJECT_TYPE.DANXUAN||type===SUBJECT_TYPE.DUOXUAN
        }
    },
    filters:{
        fmtSubjectType(val){
            return ['Multiple choice'.'Multiple choice'.'True'.'Short answer'][val]
        },
        fmtOrder2ABC(val) {
            return 'ABCDEFGHIJKLMNOPQRSTUVWXYZ'[val]
        }
    },
    data() {
        return {
            SUBJECT_TYPE
        }
    },
})
Copy the code

config/index.js

• You can change the MODE to replace the interface

import {MODE_TYPE} from './enum'
const BASE_URL_BEF=' '
const BASE_URL_PRO='XXX'
const BASE_URL_DEV='PPPP'
const MODE=MODE_TYPE.BEF
export const BASE_URL = [BASE_URL_BEF,BASE_URL_PRO,BASE_URL_DEV][MODE]
Copy the code

config/enum.js

• For the sake of magic numbers, make the code clearer by passing the following

/ / the enumerationexport const MODE_TYPE={
    BEF:0,
    PRO:1,
    DEV:2
}
export const SUBJECT_TYPE={
    DANXUAN:0,
    DUOXUAN:1,
    PANDUAN:2,
    JIANDA:3
}
Copy the code

mock/index.js

• Mock data

import Mock from 'mockjs'
Mock.mock('/subjectList', {"subjectList|10":[
        {
            "id|+1": 1,
            "title": "@ cword (5, 10)"."type": "@ integer (0, 3)",
            author:"@cname",
            createDate:'@datetime'."choice": [{"id": 11."choice": "A"."answer": 0}, {"id": 12."choice": "B"."answer": 1}, {"id": 13."choice": "C"."answer": 2}, {"id": 14."choice": "D"."answer": 3}],"answer": "C",
            desc:'@ cword (8, 25)'}]})Copy the code

Effect of the page

---