vuex辅助函数

一、mapState

1、在需要使用的组件中引入mapState

import {mapState} from 'vuex'

2、在computed计算属性中编写mapState

computed：{

...mapState({
自定义属性名：state中的属性名

}）

}

或 computed：{

...mapState(['state中的属性名'])

}

3、在dom元素中将自定义属性名当作data来使用

{{自定义属性名}}或{{state中的属性名}}

二、mapGetters

1、在需要使用的组件中引入mapGetters

import {mapGetters} from 'vuex'

2、在computed计算属性中，编写Getters

computed：{

...mapGetters({
自定义属性名：getters中的属性名

}）

}

或 computed：{

...mapGetters(['getters中的属性名'])

}

3、在dom元素中将自定义属性名当作data来使用

{{自定义属性名}}或{{state中的属性名}}

三、mapMutations

1、在需要使用的组件中引入mapMutations

import {mapMutations} from 'vuex'

2、在methods方法中编写mapMutations

methods:{
...mapMutations({
自定义属性名：mutations中的方法名
}）
}
或
methods:{
...mapMutations(['mutations中的方法名'])
}

3、在dom元素上绑定自定义事件

<div @click="自定义属性名(payload)"></div>
或
<div @click="mutation中的方法名(payload)"></div>

四、mapActions

1、在需要使用的组件中引入mapActions

import {mapActions} from 'vuex'

2、在methods方法中编写mapActions

methods:{
...mapActions({
自定义属性名：actions中的方法名
}）
}
或
methods:{
...mapActions(['actions中的方法名'])
}

3、在dom元素上绑定自定义事件

<div @click="自定义属性名(payload)"></div>
或
<div @click="mutation中的方法名(payload)"></div>