组件中关于vuex的状态及方法的几种使用形式（一）非modules类型

1、关于state（在组件中使用，一般都是放到计算属性中(computed)，可能存在基于vuex的某个状态做改变）

方法一：不使用辅助函数（分为注册到跟组件和未注册到跟组件）

computed: {
    当vuex被注册到跟组件时，可以用this.$store访问
    此处不能用箭头函数，作用域问题
    state: function() {
        return this.$store.state.xxx
    }
    当vuex没有被注册到跟组件，需要用import引入
    import state form '文件—一般是index文件'
    state：state => state.xxxx
}

方法二：使用辅助函数（分对象形式和数组形式）对象形式包含3种

import { mapState } form 'vuex'
对象的形式
computed: {
    ...mapState({
        state: state => state.xxx,
        传字符串参数 'xxx' 等同于 state => state.xxx
        state: 'xxx'
        如果想访问this，需要普通函数
        state: function(state) {
             return  state.xxx + this.xxx
        }
    })  
} 
数组的形式
computed: {
    映射 this.count 为 store.state.count
    ...mapState([
        'xxx'
    ])
}
不管对象形式还是数组形式，当计算属性只有vuex中的状态是可以去掉{}，即
computed：mapSatte({})或computed：mapSatte([])       

2、关于getters中方法在组件中使用，getter其实就是vuex中state的计算属性，所以getter的使用方式和state基本相同

方法一：不使用辅助函数（分为注册到跟组件和未注册到跟组件）

computed: {
    当vuex被注册到跟组件时，可以用this.$store访问
    此处不能用箭头函数，作用域问题
    state: function() {
        return this.$store.getters.xxx
    }
    当vuex没有被注册到跟组件，需要用import引入
    import state form '文件—一般是index文件'
    state：state => state.getters.xxx
}　

方法二：使用辅助函数（分对象形式和数组形式）

import { mapGetters } form 'vuex'
对象的形式
computed: {
    把 this.state 映射为 this.$store.getters.xxx，可以理解为state为xxx的别名
    ...mapGetters({
        state: 'xxx'
    })  
} 
数组的形式
computed: {
    直接访问属性
    ...mapGetters([
        'xxx'
    ])
}
不管对象形式还是数组形式，当计算属性只有vuex中的状态是可以去掉{}，即
computed：mapSatte({})或computed：mapSatte([]) 

注意：getters的使用形式

　　1、对于方法一（不使用辅助函数的时候）与state是相同的

　　2、对于方法二（使用辅助函数的时候）与state略有不同

区别：对于使用辅助函数的情况下，getters的使用对象的形式，无法使用函数获取（箭头函数和普通函数都不可行）即如下方式不可行

import { mapGetters } form 'vuex'
computed: {
    ...mapGetters({
        state: state => state.getters.xxx,
        state: function(state) {
             return  state.getters.xxx
        }
    })  
} 

 

3、关于mutations中的方法在组件中的使用

方法一：不使用辅助函数

官方提供commit方法来提交mutation
this.$store.commit('mutation中的函数名称', 参数)
经过测试也可以通过一下方式调用
this.$store._mutation['mutation中的函数名称'][0]()

其中_mutations可以通过打印this.$store看到

方法二：使用辅助函数

import { mapMutations } form 'vuex'
对象的形式
methods: {
    将 this.xxx() 映射为 this.$store.commit('bb')
    ...mapMutations({
        'xxx': 'bb'
    })
}
数组的形式
methods: {
    将 this.bb() 映射为 this.$store.commit('bb')
    ...mapMutations([
        'bb'
    ])
}

注意：mutations使用形式

　　   1、不使用辅助函数时，推荐使用commit来访问mutations中的方法，对于this.$store._mutation['mutations中的函数'][0]()形式不推荐使用

　　　2、对于使用辅助函数的情况下，mutations的使用对象的形式，无法使用函数获取（箭头函数和普通函数都不可行）即如下方式不可行

import { mapMutations } form 'vuex'
methods: {
    ...mapMutations({
        state: state => state._mutations['xxx'][0](),
        state: function(state) {
             return  state._mutations['xxx'][0](),
        }
    })  
} 

4、关于actions中的方法在组件中的使用

方法一：不使用辅助函数

官方提供dispatch方法来提交mutation
this.$store.dispatch('actions中的函数名称', 参数)
经过测试也可以通过一下方式调用
this.$store. _actions['actions中的函数名称'][0]()

其中_actions可以通过打印this.$store看到

方法二：使用辅助函数

import { mapActions } form 'vuex'
对象的形式
methods: {
    将 this.xxx() 映射为 this.$store.dispatch('bb')
    ...mapActions({
        'xxx': 'bb'
    })
}
数组的形式
methods: {
    将 this.bb() 映射为 this.$store.dispatch('bb')
    ...mapActions([
        'bb'
    ])
}

注意：actions使用形式

　　   1、不使用辅助函数时，推荐使用dispatch来访问actions中的方法，对于this.$store._actions['actions中的函数'][0]()形式不推荐使用

　　　2、对于使用辅助函数的情况下，actions的使用对象的形式，无法使用函数获取（箭头函数和普通函数都不可行）即如下方式不可行

import { mapActions } form 'vuex'
methods: {
    ...mapActions({
        state: state => state._actions['xxx'][0](),
        state: function(state) {
             return  state._actions['xxx'][0](),
        }
    })  
} 

 总结：

　　1、对于state来说，使用方法一共有6种，不使用辅助函数2种，使用辅助函数4种，其中对象的形式3种，数组形式1种　　

　　2、对于getters、mutations、actions来说使用方法一致，不使用辅助函数时有2种，使用辅助方法2种，对象1种，数组1种