vuex of commit, payload, actions, setter, mutations and other methods Case

Creating a warehouse that is four steps away:

// create a repository, some global data and stored (option four) 
const Store = new new Vuex.Store ({
     // global data 
    State: { 
        Todos: []   
    }, 
    // synchronization function 
    mutations: { 
        GETALL (State, payload ) { 
            // state.todos.push (payload ...) 
            state.todos = payload 
        }, 
        DEL (state, payload) { 
            // the id data delete state 
            state.todos = state.todos.filter (item => item.id! = payload.id) 
        }, 
        the ADD (State, payload) { 
            the console.log (payload) 
            // inserted into the array
            state.todos.push (payload) 
        }, 
        the CHANGE (State, payload) { 
            state.todos.map (Item => {
                return item.id == payload.id? payload: Item 
            }) 
        } 
    }, 
    // asynchronous function 
    actions : {
         the async GETALL ({} the commit, payload) {
             // data interface requests, and then stored in the channel state of todos 
            var data = the await FETCH ( " http://127.0.0.1:3000/mapList " ) .then ( = data> the data.json ())
             // issued commit command, and the load transfer data as last 
            commit (' GETALL ' , Data) 
        }, 
        the async DEL ({} the commit, payload) {
             // the API interface that the deletion request, delete the data in the local db.json 
            the await FETCH ( " http://127.0.0.1:3000/mapList / " + payload.id, { 
                Method: ' the dELETE ' 
            }) 

            // delete a global state data warehouse, affect the view update 
            the commit ( ' DEL ' , payload) 
        }, 
        the async the ADD ({} the commit, payload) {
             var data = the await FETCH ( " http://127.0.0.1:3000/mapList" , { 
                Method: ' the POST ' , 
                headers: { ' the Content-type ' : ' file application / JSON ' }, 
                body: the JSON.stringify (payload)    // only submit string type of the JSON 
            }) the then (= Data. > the data.json ()) 

            // new data into state, affect the view update 
            the commit ( " the ADD " , data) 
        }, 
        the async the CHANGE ({} the commit, payload) {
             var data = the await FETCH ( " HTTP: // 127.0.0.1:3000/mapList/" + Payload.id, { 
                Method: ' the PATCH ' , 
                headers: { ' the Content-type ' : ' file application / JSON ' }, 
                body: the JSON.stringify (payload)    // only submit string type of the JSON 
            }). the then (Data => the data.json ()) 

            // Although modification achieved, also updated view, but for completeness predictable state, the writing or 
            the commit ( ' the CHANGE ' , Data); 
        } 
    }, 
    // calculation property 
    getters: { 
        yizuo (State, getters) { 
            returnstate.todos.filter (Item => item.done) // Returns do 
        }, 
        weizuo (State, getters) { 
            return state.todos.filter (Item =>! item.done)   // returns without making 
        } 
    }, 
    plugins: [ 
        createLogger () 
    ] 
})

 

vue assembly code:

<template>
    <div>
        <div>
            <el-input v-model="txt" placeholder="请输入内容" class="add"></el-input>
            <el-button type="primary" @click="add" icon="el-icon-circle-plus">增加</el-button>
        </div>

        <ul>
            <li is="TodoLi" v-for="item in todos": Item = " Item " > </ li> 
        </ ul> 

        <the p-> 
            All: {{$ store.state.todos.length}} a to-do - 
            has to do: {{$ store.getters.yizuo.length }} of completion - 
            not done: {{$ store.getters.weizuo.length}} a dos
         </ P> 
        
        <Button-type EL = " Primary " @ = the Click " all " > all </ el -button> 
        <EL-the Button of the type = " Primary " @ the Click = " yizuo " > View have done </ EL-the Button> 
        <EL-the Button of the type = "primary" @click=" Weizuo " > View not done </ EL-Button> 
    </ div> 
</ Template> 

<Script> 
    Import TodoLi from  " ./components/TodoLi.vue " 
    Export default { 
        Created () { 
            // issue an asynchronous command, trigger Actions 
            the this $ store.dispatch (. ' GETALL ' ) 
        }, 
        Data () { 
            return { 
                TXT: '' , 
                State: ' All ' 
            } 
        }, 
        computed:{ 
            All () {
                if(this.state == 'all'){
                    return this.$store.state.todos
                }else if(this.state == 'yizuo'){
                    return this.$store.getters.yizuo
                }else if(this.state == 'weizuo'){
                    return this.$store.getters.weizuo
                }
            }
        },
        Methods: {
            the Add () { 
                IF ( the this .txt == '' ) return ; 

                // not empty, then the asynchronous request issuing new commands 
                the this $ store.dispatch (. ' the ADD ' , {ID: new new a Date () - 0 , title: the this .txt, DONE: to false })
                 the this .txt = '' 
            }, 
            All () { 
                the this .STATE = ' All ' 
            }, 
            weizuo () { 
                the this .STATE = ' weizuo ' 
            },
            yizuo(){
                this.state = 'yizuo'
            }
        },
        components: {
            TodoLi
        }
    }
</script>

<style scoped>
    ul{margin: 0;padding: 0;}
    .add{
        width: 300px;
    }
</style>

 

vue commit occurs asynchronously (dispatch), etc.

<template>
    <li>
        <el-checkbox v-model="item.done" @change="changeDone(item)"/>
        <span v-if="!isShow" class="title" @dblclick="showInput" :class="{cur: item.done}">
            {{item.title}}
        </span>
        <el-input v-if="isShow" v-model="item.title" autofocus @change="hideInput(item)">
        </el-input>
        <el-button type="danger" icon="el-icon-delete" circle class="btn" @click="del(item.id)">
        </el-button>
    </li>
</template>

<script>
    export default {
        props: ['item'],
        data(){
            return {
                isShow: false
            } 
        }, 
        Methods: { 
            del (ID) { 
                the this . Store.dispatch $ ( ' DEL ' , {ID}) 
            }, 
            showInput () { 
                // Double-display INPUT 
                the this .isShow = to true 
            }, 
            hideInput (Item) { 
                / / lose focus hidden input, and transmits the command to change the title 
                the this .isShow = to false ;
                 the this . store.dispatch $ ( ' the CHANGE ' , Item) 
            }, 
            changeDone (Item) { 
                the this . store.dispatch $ ( 'The CHANGE ' , Item) 
            } 
        }, 
        // directives: {
         //      // custom assembly instruction, the focus is automatically
         //      Focus: {
         //          inserted The (EL) {
         //              el.focus ()
         //          }
         //      }
         // } 
    }
 </ Script> 

<style scoped> 
    Li { 
        List - style: none; 
        width: 400px; 
        height: 40px; 
        padding - left: 10px; 
        Line -height: 40px;
        margin-top:10px;
        border-bottom: 1px solid #eee;
    }
    .el-checkbox{float: left;}
    .title{
        /* float: left; */
        width: 80%;
        font-family: "Helvetica Neue","PingFang SC","Hiragino Sans GB",Arial,sans-serif;
        display: inline-block;
    }
    .el-input{float: left;width: 200px;}
    .btn{float: right;}
    .btn button{float: left;}
    .cur{color:#ccc;}
</style>