vuex中的state、mutations 、actions 、getters四大属性如何使用

一、state （提供唯一的公共数据源）

方式1 在div中，$store.state.count

方式2

import {mapState} from ‘vuex’

computed:{

…mapState([‘count’])

}

在div中直接使用，{{count}}

二、 mutations (用于变更store中的数据)（不能执行异步操作，延时器）

方式1

在store.js中，

Mutations:{

Add(state) {

State.count++

}

}

butonOnclick {

this.$store.commit(‘add’)

}

方式2

Import {add} from ‘vuex’

Methods: {

…mapMutations([‘add’])

}

点击事件直接使用

三、Actions

actions 用于处理异步任务，但是action中还是要通过触发mutations的方式间接的变更数据。

注意：action中，不能直接修改state中的数据，必须通过context.commit()触发某个mutations才行。

方法1

Store.js中,

Actions: {

addN (context,step) {

setTimeout(()=> {

context.commit(‘add’)

})

}

}

 

buttonOnclick() {

this.$store.dispatch(‘addN’)

}

 

 

方法2

import {mapActions} from ‘vuex’

methods: {

…mapActions([‘addN’])

}

四、 getters

(用于对store中的数据进行加工处理形成新的数据)（不会修改state中的数据）

类似vue中的计算属性

方式1

{{this.$store.getters.名称}}

getters: {

showNum: state=> {

return ‘当前数量是’+ state.count + ’个’

}

}

方式2

Import {mapGetters} from ‘vuex’

Computed: {

…mapGetters([‘showNum’])

}

{{ showNum }}