使用vuex写地址的增删和替换

store文件夹下的index.js

import Vue from "vue"
import Vuex from "vuex"
Vue.use(Vuex)

var state={
    users:[
        {email1:"姜长坤",email2:"13253422387",email3:"河南省郑州市二七区",email4:"千锋教育"}
    ]，
}

var  mutations={
    del( state , i ){
        state.users.splice( i , 1 )//地址的删除
    },
    addcart(state,data){
        state.cart.push(data)//地址的增加
    }
}


var actions = {
    addUser( {commit} , data ){
        commit('add',data)
    },
    delUser( {commit} , i ){
        commit( 'del' , i )
    }      
}

var getters = {    //地址的替换
    allUsers(state){
        return state.users
    },
    list(state){
        return state.list
    }
}
var modules={
	status:{
		state:{
			status:''
		},
		getters:{
			status:function(state){
				return state.status
			}
		},
		mutations:{
			select:function(a,b){
				a.status=b
			}
		},
		actions:{
			select:({commit},b)=>{
				commit('select',b)
			}
		}
	}
}


export default new Vuex.Store({
    state,
    getters,
    mutations,
    actions,
    modules
})

地址管理页面

 methods: {
        btn1(){
            this.$router.go(-1)
        },
        btn2(){
            this.$router.push("/addadress")
        },
        del(i){  //删除当前地址
            this.$store.dispatch( 'delUser' , i )
        },
        btn3(i){   //把当前地址设为默认地值到订单页面
            var key =event.target.getAttribute("key");
            this.$store.commit('select',i*1+1);
            this.$router.go(-1);
        }
    },
    mounted(){
      this.str=this.$store.state.users;
    for(let i in this.$store.state.users){
        this.arr.push(this.$store.state.users[i]);
    }
    console.log(this.arr);
    }

订单页面接收信息

methods: {
    btn1() {
      this.$router.go(-1);
    },
    addUser() {
      this.$store.dispatch("addUser", {
        email1: this.obj.email1,
        email2: this.obj.email2,
        email3: this.obj.email3,
        email4: this.obj.email4
      });
      this.$router.go(-1)
    }
  },

  computed: {
    users() {
      return this.$store.getters.allUsers;
    }
  }