3、vuex状态管理--新增、编辑、删除用户功能

<template>
    <div class="myorder">      
        <h3>3、新增内容</h3>
        <div>
            <button v-if="iShow" class="btn add" @click="iChangeShow">新增</button>
            <div v-else>
                <input type="text" v-model='newPeople' placeholder="请输入人员姓名" class="name_val" />
                <button class="btn confirm" @click="addPeople(newPeople)">确定</button>
            </div>
            <table class="tab">
                <tr>
                    <th>姓名</th>
                    <th>操作</th>
                </tr>
                <tr v-for="(people,index) in peopleList" :key="index">
                    <td>{{people}}</td>
                    <td>
                        <a href="javascript:;" @click="editPeople(index)">编辑</a>
                        <a href="javascript:;" @click="delPeople(index)">删除</a>
                    </td>
                </tr>
            </table>
            <div class="mask" v-if="showEidt">
                <div class="section_txt">
                    <input type="text" v-model='changePeople'/>
                    <div class="foot_btn clearfix">
                        <button class="btn fl" @click="cancelPeople">取消</button>
                        <button class="btn fr" @click='confirmPeople(changePeople)'>确定</button>
                    </div> 
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import { mapState,mapMutations} from 'vuex'
export default{
    computed:{
        ...mapState({
            iShow:state => state.orderStatus.iShow,
            peopleList:state => state.orderStatus.peopleList,
            showEidt:state => state.orderStatus.showEidt
        }),
        newPeople: {
            get(){
                return this.$store.state.orderStatus.newPeople;
            },
            set(people){
                this.$store.commit("setNewPeople",people);
            }
        },
        changePeople:{
            get(){
                return this.$store.state.orderStatus.changePeople;
            },
            set(people){
                this.$store.commit('setChangePeople',people);
            }
        }
    },
    methods:{            ...mapMutations(['iChangeShow','addPeople','editPeople','delPeople','cancelPeople','confirmPeople'])
    },
}
</script>

vuex -- orderStatus.js模块 存放路径：store/modules/orderStatus.js

const state={
    iShow:true,
    newPeople:'',
    peopleList:['jack'],
    showEidt:false,
    changePeople:'', //编辑弹框重新改的内容
    editId:''
};
const getters={
};
const mutations={
     iChangeShow(state){  //新增按钮 切换 input输入框
        state.iShow = !state.iShow;
     },
     setNewPeople(state,people){ //设置newPeople 为input框的文本内容
        state.newPeople = people;        
     },
     addPeople(state,people){ //新增人员添加到peopleList数组中
      if(people.length){
         state.peopleList.push(people);
      }       
     },
     delPeople(state,index){//删除数组元素
       state.peopleList.splice(index,1);
     },
     editPeople(state,index){//编辑数组元素
        state.showEidt = !state.showEidt;  //遮罩显示
        state.changePeople = state.peopleList[index];
        state.editId = index;
     },
     cancelPeople(state){ //编辑弹框中取消按钮
      state.showEidt = false
     },
     confirmPeople(state,people){
      state.peopleList[state.editId] = people;
      state.showEidt = false;
     },
     setChangePeople(state,people){
        state.changePeople = people;
     }
 };
const actions={
};
export default {
     state,
     getters,
     mutations,
     actions
}

这是store 文件夹下的index.js

用modules写法
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)

import orderStatus from './modules/orderStatus'


export default new Vuex.Store({
    modules:{
        orderStatus
    }
})

css样式

 h3{
        margin-bottom:10px;
    }
    .btn{
        height:34px;
        background:#41b883;
        border-radius:4px;
        color:#fff;
        border: 1px solid transparent; 
        outline:none;
        cursor:pointer;
    }
    .add{
        padding:0px 60px;
    }
    .confirm{
        padding:0px 20px;
    }
    .name_val{
        padding:8px 10px;
        border:1px solid #999;
        margin-right:5px;
        background:#fff;
    }
    .tab th,.tab td{
        width:80px;
        padding:5px 20px;
    }
    .tab td{
        text-align:center;
    }
    .tab td a{
        display:inline-block;
        padding:0px 5px;
        color:#666;
    }
    .mask{
        position:fixed;
        left:0px;
        top:0px;
        width:100%;
        height:100%;
        background:rgba(0,0,0,0.3);
        text-align:center;
    }
    .section_txt{
        position:absolute;
        left:50%;
        top:50%;
        width:180px;        
    }
    .section_txt input{
        width:180px;
        padding:10px;
        box-sizing:border-box;
        background:#fff;
    }
    .foot_btn{
        margin-top:10px;
    }
    .foot_btn .btn{
        width:80px;
    }