深入理解状态机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"])
    }
    })