Through this article, you can thoroughly understand the use of mapState, mapGetters, mapMutations, mapActions

This article involves knowledge points

  • vuex
  • Vuex modular
  • Namespace namespace

If you do not know the above knowledge, please refer to the relevant articles

The emergence of four mapping methods (mapState, mapGetters, mapMutations and mapActions) enables us to obtain data in VUEX without writing a lot of complicated code, simplifying user operations and improving developer efficiency. Next, let’s look at how to use these four methods

Basic usage

Assume the code for Vuex is as follows:

const store = new Vuex({
    state: {userInfo: {id:110.username:'laoxie'}},getters: {isLogin(state){
            return!!!!! state.userInfo.id } },mutations: {login(state,payload){
            state.userInfo = payload
        },
        logout(state){
            state.userInfo = {}
        }
    },
    actions: {login(ctx,payload){
            ajax('/login',payload).then(data= >{
                ctx.commit('login',data)
            })
        }
    }
})
Copy the code

The values of mapState and mapGetter mappings are attributes, so they are generally used in computed options, and the values of mapMutations and mapActions mappings are methods, so they are generally used in methods. Their parameters support array and object usage, and they return an object

{
    computed: {// Map the property of the same name userInfo to computed, and the following two lines are equivalent
        // userInfo(){return this.$store.state.userInfo}. mapState(['userInfo']), 
        
        // If you need to change the name, you can use object form (string or function form). mapState({user:'userInfo'.currentUser:state= >state.userInfo})
        
        // mapGetters does not support function writing when taking object arguments. mapGetters(['isLogin']),
        ...mapGetters({logined:'isLogin'})},methods: {Timeout (){this.codestore.mit ('logout')}. mapMutations(['logout']), 
        ...mapActions({
            logout(commit,payload){
                // commit specifies the first parameter
                // Payload is the parameter passed in when logout is called. Otherwise, it is undefined
                commit('logout')}}),$store. Dispatch ('login',user)}. mapActions(['login']),
        ...mapActions({
            login(dispatch,payload){
                // dispatch is fixed as the first parameter
                // Payload is the parameter passed when login is invoked. If it is not transmitted, it is undefined
                dispatch('login',payload)
            }
        })
    }
}
Copy the code

Advanced usage

Assume that Vuex uses modularity and namespaces to better appreciate the advantages of four mapping methods. Assume the following Vuex code:

const user = {
    // modularize and set the namespace
    namespaced:true.state: {userInfo: {id:110.username:'laoxie'}},getters: {isLogin(state){
            return!!!!! state.userInfo.id } },mutations: {login(state,payload){
            state.userInfo = payload
        },
        logout(state){
            state.userInfo = {}
        }
    },
    actions: {login(ctx,payload){
            ajax('/login',payload).then(data= >{
                ctx.commit('login',data)
            })
        }
    }
}
const store = new Vuex({
    modules:{
        user
    }
})
Copy the code

Vuex modularization only affects the acquisition of state by default, while getters, mutations and Actions are still in the global state. After setting the namespace (namespaced:true), the acquisition and operation of getters, mutations and actions need to bring the namespace, which will be relatively tedious. Using the mapping method can simplify our code, which can be used as follows:

PS: The mapping method can use the first parameter only if the namespace is set

{
    computed: {// The following two uses have one effect
        // Do not use the first argument. mapState({userInfo:state= >state.user.userInfo}),
        // Set the first parameter to the module name. mapState('user'['userInfo']), 
        
       
        // The following two uses have one effect. mapGetters(['user/isLogin']), // Not recommended. Write the 'user/isLogin' attribute to the instance. mapGetters('user'['isLogin']), // Write the 'isLogin' attribute to the instance
    },
    methods: {Timeout (){this.codestore.com MIT ('user/logout')}. mapActions('user'['logout']),
        
        $store. Dispatch ('user/login',user)}. mapActions('user', {login(dispatch,payload){
                // dispatch is fixed as the first parameter
                // Payload is the parameter passed when login is invoked. If it is not transmitted, it is undefined
                dispatch('login',payload)
            }
        })
    }
}
Copy the code

The above is the use of mapState, mapGetters, mapMutations, mapActions four mapping methods. The results of modularization and namespace can give full play to their advantages, and we can understand their essence as long as we try more in the actual development.