其他分享
首页 > 其他分享> > vuex中的state、mutations 、actions 、getters四大属性如何使用

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 }}

 

标签:count,getters,mutations,actions,state,add,vuex,store
来源: https://www.cnblogs.com/xiaobailang/p/15837022.html