标签：count getters mutations actions state add vuex store

一、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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。