普歌-智音团队 vuex里State，Mutation，Action，Getter的使用

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共有，欢迎转载，且在文章页面明显位置给出原文链接，未经作者同意必须保留此段声明，否则保留追究法律责任的权利。