今日總結

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 數組 包含當前匹配的路徑中所包含的全部片斷所對應的配置參數對象