Vue 问题记录

Vue 问题记录

汇总日常开发中遇到的关于vue的问题

VeeValidator

语言设置

校验消息默认是英文的，定义中文或其他语言的错误提示消息

import VeeValidate from 'vee-validate';
import Vue from 'vue'
Vue.use(VeeValidate)

var dict = {
zh_CN: {
messages: {
  required: function(field){
    return field + '不能为空！';
  },
  between: function(field){
    return field + '输入不符合设定规则！';
  },
   min : function (field,leng) {
       return field + '长度不能小于'+leng+'位';
   }
}
}
};

VeeValidate.Validator.localize('zh_CN', dict.zh_CN);

校验的时候需要设置语言

this.$validator.localize('zh_CN');

错误消息显示

显示指定字段的第一个错误

this.$validator.first('fieldname')

显示所有字段的第一个错误消息

this.$validator.errors.all()

Mock.js

配置

路由拦截配置不需要修改之前的代码,匹配的url请求会直接通过mock而不是请求服务器

const handler = req => {
    return {mock数据};
}
Mock.mock('url拦截规则,正则表达式',handler)

配置延迟时间

模拟服务器请求的异步特性

Mock.setup({
    timeout:1000
})

Vuex

模块化

多人协作，或者中大型的项目需要把store分为模块

const a = {
    state : {foo:1},
    mutations : {hello(state)=> {}}，
    modules : {
        ...嵌套
    }
}
const b = {}
const store = {
    state : {},
    mutations : {},
    actions : {},
    modules : {
        module_name_a:a,
        module_name_b:b
    }
}

在调用的时候，state 有命名空间的，而mutation和actions都与父模块共用同样的命名空间所以不能定义与父模块同名的mutation 或 action

获取模块的state

  this.$store.state.module_name_a.foo

调用模块的mutation

this.$store.commit('hello')

namespace

定义了namespace ,mutations 和 action 会带上模块的命名: module_name/muation

  const store = {
        modules : {
            namespace : true,
            a: {
                muations : {
                    test(state) => {...}
                }
            }
        }
  }

这时候调模块内的mutation

this.$store.commit('a/test')

vuejs-datepicker

日期选择控件

设置默认值

  <datepicker v-model="mydate" </datepicker>

日期格式化

<datepicker :format="'yyyy-MM-dd'"> </datepicker>

语言选择（默认是英文）

导入语言资源文件，然后再设置:language

设置成中文

//script
import {zh} from 'vuejs-datepicker/src/locale'
//template
<datepicker :language="zh" ></datepicker>

日期输入框格式化

默认的输入框可能与页面的设计风格不一致 :input-class 可以设置自定义的风格

<datepicker :input-class='my-input' ></datepicker>