介绍 import Vue 得到& # 39;vue # 39;
import Vuex 得到& # 39;vuex& # 39;
Vue.use (Vuex)
const 状态={//状态对象
,
count1:1,
,
,
,
},
const 突变={//触发状态
,贾(n), {
,,,state.count1 +=n;
,,},
,剑(状态){
,,,state.count1——;
,,},
,
},
const 行动={
jiaAction(上下文){
,
context.commit(& # 39;贾庆林# 39;(10)/*这句话就是说,我现调在商店用了同步的方法贾()*/,
},
jianAction({提交}){
,
,
提交(& # 39;剑# 39;)/*这句话就是说,我现调在商店用了同步的方法剑()*/}
,
,
}
,
,
export default new Vuex.Store ({
,
,
,
状态,
突变,
getter方法,/*这动作与状态,突变的操作方法是相同*/}) import {mapState、mapMutations mapGetters, mapActions},得到& # 39;vuex& # 39; & lt; template>
& lt; div>
,
& lt; div>
,
{{count1}}
,
& lt;/div>
,
& lt;/div>
& lt;/template>
& lt; script>
import 才能;store 得到& # 39;@/商店# 39;
import 才能{mapState、mapMutations mapGetters, mapActions},得到& # 39;vuex& # 39;
export 默认{才能
,,,的数据(){
,,,,,返回{
,,,,,,
,,,,,}
,,,},
,,
,方法:{
……mapMutations(才能,
,,,& # 39;贾庆林# 39;& # 39;剑# 39;
]),才能
……才能mapActions ([& # 39; jiaAction& # 39; & # 39; jianAction& # 39;])
},,
,
,才能计算:{
,,
,,
,,…mapState ([“count1"]),
,
,
,,},
,,,,
,,,商店
,,,,
,,}
& lt;/script>
,
,
,
,
,
& lt; style scoped>
.color {
颜色:红色;
}
,
& lt;/style> & lt; template>
& lt; div>
,
& lt; div>
,
{{count1}}
,
,
& lt;/div>
& lt; p>
,& lt; button @click=癹iaAction"祝辞+ & lt;/button>
,& lt; button @click=癹ianAction"祝辞& lt;/button>
& lt;/p>
& lt;/div>
& lt;/template> & lt; template>
& lt; div>
,
& lt; div>
,
{{count1}}
,
& lt;/div>
& lt; p>
,& lt; button @click=癹iaAction"祝辞+ & lt;/button>
,& lt; button @click=癹ianAction"祝辞& lt;/button>
& lt;/p>
& lt;/div>
& lt;/template>
& lt; script>
import 才能;store 得到& # 39;@/商店# 39;
import 才能{mapState、mapMutations mapGetters, mapActions},得到& # 39;vuex& # 39;
export 默认{才能
,,,的数据(){
,,,,,返回{
,,,,,,
,,,,,}
,,,},
,,
,方法:{
……mapMutations(才能,
,,,& # 39;贾庆林# 39;& # 39;剑# 39;
]),才能
……才能mapActions ([& # 39; jiaAction& # 39; & # 39; jianAction& # 39;])
},,
,
,才能计算:{
,,
,,
,,…mapState ([“count1"]),
,
,
,,},
,,,,
,,,商店
,,,,
,,}
& lt;/script> & lt; button @click=癹iaAction"祝辞+ & lt;/button>
,& lt; button @click=癹ianAction"祝辞& lt;/button> & lt; button @click=癹ia"祝辞+ & lt;/button>
,& lt; button @click=癹ian"祝辞& lt;/button> setTimeout(()=祝辞{
context.commit(& # 39;剑# 39;)
},3000)
console.log(& # 39;我先被执行& # 39;);
怎么在vuex中使用行动异步修改状态?很多新手对此不是很清楚,为了帮助大家解决这个难题,下面小编将为大家详细讲解,有这方面需求的人可以来学习下,希望你能有所收获。
<强>第一步在你建立vuex的商店。js中声明行动方法
<强>第二步在你的模板(比如a.vue)里引入你需要行动方法
1)进口引入mapActions
2)在你的方法中引入……mapActions ((& # 39; jiaAction& # 39; & # 39; jianAction& # 39;])
格式一般都是固定照抄即可
代码如下:
<强>第三步在你的组件的模板(a.vue)里引入点击事件
代码如下:
整体代码如下:
注:现在你点击你的+或-的按钮,观察它的值与你把
换成
<强>有何不同?
没有区别说明你调试代码成功
<强>第四步进行异步验证
我们在我们的商店。js中的jiaAction加入jiaAction方法
