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>