1.State定义：State提供唯一的公共源，所有共享的数据都要统一放 到Store的State中进行存储
2.Mutation定义：用于变更Store的数据
3.Action定义：用于处理异步任务
4.Getter定义：用于对Store中数据进行加工处理成新的数据
State的用法
//创建store 的数据源，提供唯一公共数据
const store =new Vuex.Store({
State:{ count: 0 }
})
组件访问State中数据的第一种方式：
this.$store.state.全局数据名称
在state中添加count数据
在这里插入图片描述
在组件中直接使用数据
在这里插入图片描述
组件访问State中的第二种方法
在这里插入图片描述
在这里插入图片描述
Mutation的用法
const store = new Vuex.Store({
state:{
count: 0
},
mutations:{
add(state){
state.count++
}
}
})
在组件中用commit方法直接调用
methods:{
handlel(){
this.$store.commit("add)
}
}
Action用法（用于处理异步操作）
const store = new Vuex.Store({
state:{
count: 0
},
mutations:{
add(state){
state.count++
}
actions:{
//用commit调用mutations里的方法
addAsync(context){
setTimeout(()=>{
context.commit("add)
}，1000)
}
}
})
在组件里触发
methods：{
handel(){
//触发actions
this.$store.dispatch("addAsync)
}
}
Getter的使用
const store - new Vuex.Store({
state:{
count:0
},
getters:{
showNum:state=>{
return '当前的最新数据是【'+ state.count+'】'
}
}
})
在组件中触发
方法1
[图片上传失败...(image-f5c8ab-1598980188291)]
方法2
在这里插入图片描述
相关内容请浏览《普歌-智音团队 javascript-DOM重点总结》
作者：lihaijin8090
本文源自：lihaijin8090的《普歌-智音团队 vuex里State，Mutation，Action，Getter的使用》
本文版权归作者和CSDN共有，欢迎转载，且在文章页面明显位置给出原文链接，未经作者同意必须保留此段声明，否则保留追究法律责任的权利。
