今日总结

vue 结合element-ui的表单验证

1.使用此方法前检查prop一定必须要写在上面，写在input上或者其他任何地方都不行（el-form-item prop属性绑定）

 <el-form-item label='' prop="prop">
	<el-input type="number" v-model.number="amt" placeholder=""></el-input>
 </el-form-item>  

​ 数字类型的验证需要在v-model 处加上 .number 的修饰符，这是vue自身提供的用于将绑定值转化为number类型的修饰符

2.el-form riles model 属性绑定，ref 标识

    this.$refs[formName].validate((valid) =>{
        if(valid){
            dosomething
        }
        else{
            return false
        }
    })

vuex中注意

actions 异步修改状态

actions 和 mutations 是类似的，不同在于：

​ Action提交的是Mutation,不能直接修改state中的状态，而Mutations是可以直接修改state中的状态的；

​ Action是支持异步操作的,而 MUtations 只能是同步操作

dispatch 和 commit的用法和区别

​ dispatch 异步操作，例如向后台请求数据 this.$store.dispatch('action方法名',值)
​ commit 同步操作 this.$store.commit('mutations方法名',值)

使用 vuex 的 getter

​ 有时候需要从 store 中的 state 中派生出一些装态,例如对列表进行过滤并计数, 可以使用 Vuex 的 getter (可以认为是 store 的计算属性)

​ getter的返回值会根据它的依赖被缓存起来，只有当她的依赖值发生了改变才会被重新计算属性

    const store = new Vuex.Store({
        state: {
            todos: [
                { id: 1, text: '...', done: true },
                { id: 2, text: '...', done: false }
            ]
        },
        getters: {
            doneTodos: state => {
                return state.todos.filter(todo => todo.done)
                }
        }
    })

    通过让 getter 返回一个函数，来实现给 getter 传参
    getters:{
        getTodoById: (state) => (id) =>{
            return state.todos.find(todo => todo.id === id)
        }
    }

    store.getters.getTodoById(2)

mapGetters 辅助函数: 将 store 中的 getter 映射到局部计算属性

mapGetter({
  // 把 `this.doneCOunt` 映射为 `this.$store.getters.doneTodosCOunt`
  doneCOunt: 'doneTodosCount'
})

路由中 $route.matched 数组 包含当前匹配的路径中所包含的所有片段所对应的配置参数对象