1、mutations
mutations.js
mutations是专门修改store中状态的,同步修改数据
// mutations专门用来修改data里面的数据,data里面的数据也可以在外面修改,但是不推荐在外面修改
// 只能执行同步的代码
// mutatiosn的方法只接受2个参数,第一个参数是state(store中的state),第二个参数是一个obj
export default {
updateCount (state, num) {
state.count = num
}
}
app.vue
mounted:function(){
let i = 1;
setInterval(() => {
//触发mutations this.$store.commit('name',obj)
this.$store.commit('updateCount', i++)
},1000)
}
state的值推荐不要在外面修改this.$store.state.count = 3;为了防止在外面修改,添加如下图参数,但是在正式环境下必须把他注释
辅助函数写法:
app.vue
import { mapMutations } from 'vuex'
methods:{
...mapMutations ['updateCount']
},
mounted:functions(){
this.updateCount('updateCount', 2)
}
image.png
2、actions
Action 提交的是 mutation,而不是直接变更状态。
Action 可以包含任意异步操作。(比如数据请求)
actions.js
export default {
// actions用于修改data的数据,异步请求
// actions函数的一个参数是store,也就是vux的整个对象,第二参数是一个对象,(只有2个参数)
updateCountAsync (store, data) {
setTimeout(() => {
store.commit('updateCount', data.num)
}, data.time)
}
}
app.vue
dispatch专门用来触发actions
this.$store.dispatch('updateCountAsync',{
num: 5,
time: 2000
})
辅助函数写法:
app.vue
import { mapActions } from 'vuex'
methods:{
...mapActions(['updateCountAsync']),
},
mounted:function(){
this.updateCountAsync({
num: 5,
time: 2000
})
}
网友评论