深入理解状态机（Vuex）

实例化

        let store = new Vuex.Store({
            state:{},
            getters:{},
            mutations:{},
            actions:{}
        })

1. state
   1) 作用

   维护状态，customers、visible...

   2) 定义

   state:{
       customers:[],
       visible:false
   }

   3)使用

   1. 通过状态机实例对象直接访问
       store.state.customers
   2. 如何在vue实例中访问(通过计算属性映射)
       new Vue({
           el:"",
           store,    //注入store
           data:{},
           computed:{
               customers:function(){
                   return this.$store.state.customers;
               }
           }
       })

2. mutation
   1) 作用

   唯一修改state值的机制，并且只能是同步操作

   2) 定义

   state:{
       customers:[]
   }
   mutations:{
       refreshCustomers(state,customers){
   
       }
   }
   state是vuex实例化并且传递给突变，customers属于该突变一个载荷对象（参数）

   3) 使用

   store.commit("refreshCustomers",[1,2,3])

3. action
   1) 作用

   封装异步操作,不能直接更新state,必须借助mutation来进行更新

   2) 定义

   actions:{
       async findAllCustomers(context){
           let response = await axios.get();
           context.commit("refreshCustomers",response.data.data)
       },
       // id
       async deleteCustomerById(context,payload){
           let response = await axios.get("",payload);
           context.dispatch("findAllCustomers")
       }
   }
   context是一个与store对象解构相似的对象，包含了commit、dispatch、getters、state
   

   3) 使用

   store.dispatch(actionName,payload)
   

4. 模块化

    let customer = {
    namespaced:true,
    state:{
        list:[],
        visible:false
    },
    getters:{
   
    },
    mutations:{
   
    },
    actions:{
   
    }
    },
    let category = {
    namespaced:true,
    state:{
        list:[],
        visible:false
    },
    getters:{
   
    },
    mutations:{
   
    },
    actions:{
    
    }
    }
   
    let store = new Vuex.Store({
    modules:{
        customer,
        category
    }
    })
   
    new Vue({
    computed:{
        ...Vuex.mapState("customer",["list"])
    }
    })