vuex之mapState辅助函数使用

vuex 辅助函数

当一个组件需要获取多个状态的时候，将这些状态都声明为计算属性会有些重复和冗余。为了解决这个问题，我们可以使用 mapState 辅助函数帮助我们生成计算属性；

mapState的几种写法使用

// 第一种 $store.state
 computed:{
        userInformation(){
            return this.$store.state.userInformation
        },
         userToken(){
            return this.$store.state.userToken
        },
    },
    
// 第二种
  computed:mapState([
       'userInformation',
        'userToken'
    ]),  
    
// 第三种  
  computed:mapState({
        'userInformation':state=>state.userInformation,
        'userToken':state=>state.userToken,
    })

// 第四种  使用展开运算符
  computed:{
        xxx(){
            return 'yyy'
        },
        // 注意：这种写法用mapstate等这种辅助函数的时候，前面的方法名和获取的属性名是一致的
        ...mapState([
            'userInformation',
            'userToken'
        ])
    },

mapGetters的几种写法使用

// 第一种 $store.getters
 computed:{
        xxx(){
            return 'yyy'
        },
        ...mapState([
            'userInformation',
            'userToken'
        ]),
        // 前面的方法名和获取的属性名可以不同
        userInfo(){
           return this.$store.getters.userInfo
        },
        userTk(){
           return this.$store.getters.userTk
        },
    },
    
// 第二种
 computed:{
        xxx(){
            return 'yyy'
        },
        ...mapState([
            'userInformation',
            'userToken'
        ]),
        // 注意：这种写法用mapGetters等这种辅助函数的时候，前面的方法名和获取的属性名是一致的
        ...mapGetters([
            'userInfo',
            'userTk'
        ])
    },


// 第三种
 computed:{
        xxx(){
            return 'yyy'
        },
        ...mapState([
            'userInformation',
            'userToken'
        ]),
        // userInfo 是一个重新定义的别名,'userInfo'不是字符串，而是对应的getter里面的方法名
        ...mapGetters({
            'userInfo':'userInfo',
            'userTk':'userTk'
        })
    },

mapMutations的几种写法使用

methods:{
  	...mapMutations([
       'userInformation',
       'userToken'
 	]),
 	xxx(){
 	 // 将 this.userInformation('fqniu') 映射为 this.$store.commit('userInformation','fqniu')
	 this.userInformation('fqniu')
     this.userToken('80859-abcc-403-81a9-c7d5341fqniu')
	}
}

// 第二种写法
methods:{
  ...mapMutations({
       // userInfo 是一个重新定义的别名，本组件可以直接调用这个方法名字使用
       'userInfo':'userInformation',
       'userTk':'userToken'
   }),
   xxx(){
 	 // 将 this.userInfo('fqniu') 映射为 this.$store.commit('userInformation','fqniu')
	 this.userInfo('fqniu')
     this.userTk('80859-abcc-403-81a9-c7d541fqniu')
	}
}

mapActions的几种写法使用

// 第一种 $store.actions
created(){
	this.$store.dispath('userInfo','fqniu')
	this.$store.dispath('userTk','80859-abcc-403-81a9-c7d5341fqniu')
},

// 第二种
methods:{
        // 注意：这种写法用mapActions等这种辅助函数的时候，前面的方法名和获取的属性名是一致的
        ...mapActions([
            'userInfo',
            'userTk'
        ])
  },


// 第三种
methods:{
        // userInfo 是一个重新定义的别名,挂载到this(vue)实例上，'userInfo'是actions里面的函数名称
        ...mapActions({
            'userInfo':'userInfo',
            'userTk':'userTk'
        })
 },

vuex中写法

import Vue from 'vue'
import Vuex from 'vuex'

import user from './module/user'

Vue.use(Vuex)

export default new Vuex.Store({
    state: {
        userNameFirst:'fq',
        userNameLast:'niu',
    },
    mutations: {
        // 用户信息
        userInformation(state,userInfo){
            state.userInformation = userInfo
        },
        // 用户token所有数据
        userToken(state,userToken){
            state.userToken = userToken
        },

    },
    getters:{
        userInfo(state){
            return state.userNameFirst +'fqniu'
        },
        userTk(state){
            return state.userNameLast+'202102122141'
        }
    },
    actions: {
        //设置token
       
    },
    modules: {
        // user,
    }
})