ElementUI+vuex 기반 양식 유효성 검사 공유(5.6 빠른 추가 설명)

프로젝트 배경 소개

프로젝트는 vue+elementUI를 기반으로 한 백그라운드 관리 시스템입니다.프로젝트에서 표에 대한 검증이 많이 언급되었는데 초기에 프로젝트의 진도를 감히 하기 위해 이 백엔드 시스템의 표 검증에 대해 통일을 하지 못했다.따라서 초기 솔루션은 다음과 같습니다.

elementUI에서form 구성 요소가 자체적으로 가지고 있는 검증 방법

     data ，
     elementUI，form ， data return 。
    export default {
        data() {
             // checkName  
            let checkName = (rule, value, callback ) => {
                if( !value ) {
                    callback( new Error(' '))
                }   
                let reg = /^[^]{1,20}$/;
                if( !reg.test( value ) ){
                    callback(new Error(' 1~20'));
                }else{
                     callback()
                }
            };
             ...
            return{
                ....
                ruleForm: {
                    name: '',
                       ...
                },
                //  rule ， elementUI 
                rules: {
                    name: [
                        { validator: checkName, trigger: 'blur' }，
                        ...
                    ],
                    ...
            }
          
           
          :model ref :rules 
          
                
                    
                
           

프로젝트가 후기에 이르렀을 때, 검증이 필요한 많은 필드가 똑같다는 것을 알게 될 것이다.모든 구성 요소에 이런 것들을 써야 하니 더 좋은 생각이 든다.예를 들어 이러한 검증 방법을 모두 꺼내서 하나의 단독 창고에 두어 다른 구성 요소를 필요에 따라 추출할 수 있는지 여부.처음에 생각한 것은 봉인을 채택하는 것이었지만 한 문장을 보고 vuex가 더 좋은 선택이라는 것을 알게 되었다.

의존도 소개

1. 요소 UI 구성 요소

vue 기반 UI 구성 요소로 패키지된 구성 요소는 편리한 기능이 필요합니다

2、vuex

Vuex는 Vue를 위한 것입니다.js 응용 프로그램 개발의 상태 관리 모드입니다.

아래의 해결 방안의 절차에서 관련 원리를 논의할 수 있다. 왜냐하면 vuex에 대해서도 방금 접촉했기 때문에 후기 프로젝트에서 그때 다른 글을 써서 점에 대한 정리를 한다.

솔루션 단계(설명 첨부)

앞에서 언급한 바와 같이 우리는 다른 구성 요소를 필요에 따라 추출할 수 있는 창고가 있기를 희망한다.Vuex는 하나의 프로젝트에서 유일하게 데이터 원본을 관리하는 창고입니다.데이터에서 다른 vue 구성 요소에 공유해야 하는 속성을 상태라고 이해합니다.간단하게 말하면 데이터에서 공용해야 하는 속성이다.

1、첫걸음

npm 패키지 관리 도구를 이용하여 vuex를 설치한다.제어 명령줄에 명령 입력: cnpm install vuex --S

2. 두 번째 단계

프로젝트의 src 폴더 아래에 vuex 폴더를 새로 만들고 폴더 아래에 store를 새로 만듭니다.js 파일, 파일 중

    import Vue from 'vue';
    import Vuex from 'vuex';

3. 세 번째 단계

우리 vuex를 사용하고 도입한 후에 Vue를 사용합니다.use 인용: Vue.use(Vuex);

4, 4 단계

mian에서.js에는 vuex와 파일store도 도입해야 합니다.동시에전역 구성 요소에 store 옵션을 추가해야 합니다. 루트 실례에 store 옵션을 등록하면, 이 store 실례는 루트 구성 요소 아래의 모든 하위 구성 요소에 주입되고, 하위 구성 요소는this.$store 에 액세스합니다.

    import Vuex from 'vuex'
    import store from './vuex/store'
    
    Vue.use(Vuex);
    new Vue({
      el: '#app',
      router,
      store,
      template: '',
      components: { App }
    });

5, 5 단계

이 단계는 우리의 창고에 공유된 검증을 어떻게 넣는가가 관건이다.src/vuex/store.js 파일

    let actions = {
        checkPrice({ commit }, obj ){
            if( !obj.value ){
                obj.callback(new Error(' '));
            }
            setTimeout(() => {
                if ( !Number(obj.value) ) {
                    obj.callback(new Error(' '));
                    let reg  = /^\d+(?:\.\d{2})?$/;
                } else {
                    let reg  = /^\d+(?:\.\d{2})?$/;
                    if (obj.value < 0) {
                        obj.callback(new Error(' 0'));
                    }else if( obj.value > 99999999 ) {
                        obj.callback(new Error(' 99999999'));
                    }else if( !reg.test( obj.value ) ) {
                        obj.callback(new Error(' 2 '));
                    }
                    else {
                        obj.callback();
                    }
                }
            }, 1000);

            commit('dd')
        }

        // commit('dd')
    };
    let mutations = {
        dd(){}
    }
    
    export default new Vuex.Store({
    　　actions,
    　　mutations
    })

6단계

공유 방법이 완성되면 구성 요소에서 어떻게 인용하는지

    export default {
        data() {
            let checkPrice = (rules,value,callback )=>{　
        　　　　this.$store.dispatch('checkPrice',{rules,value,callback})
        　　};
        ...
        return{
            ...
        }
    }