vuex的使用

2022-02-10 16:33:48 阅读：170 来源： 互联网

标签：count vuex state getter mutation 使用数据 store

State

1、概念:state提供唯一的公共数据源，所有的共享数据都要统一放到store的state中进行存储

state: {
 count: 0
},

2、组件访问State中数据的方式：

this.$store.state.全局数据名称

Mutations

1、概念：Mutations用于变更store中的数据。

（1）只能通过mutation变更store数据，不可以直接操作store中的数据

（2）通过这种方式虽然操作起来稍微繁琐点，但是集中监控所有数据的变化更方便

（3）mutation只能执行同步操作，想要执行异步变更数据需要用到action

2、定义mutation


mutations: {
 //1.定义没有参数的方法  
 //state参数代表全局的state数据对象
 add(state,){
     //变更状态
    state.count ++
},
      //2.定义有参数的方法 
     //第一个参数是state数据对象，第二个参数是行参
     addN(state,step){
     state.count += step
  },
}

3、调用mutation

methods: {
   //1.调用不传参数的mutation方法
   but() {
     // this.$store.commit() 调用全局vuex里面mutations里面定义的函数
     this.$store.commit('add')
  },
   //2、调用传参数的mutation方法    
    but1() {
        let count = 3
        this.$store.commit('addN',count)
  },        
}

actions

1、概念：acction用于处理异步任务

（1）如果通过异步操作变更数据，必须通过action，而不是Mutation，但是在action中还是要通过触发mutation的方式间接来变更数据

2、定义action

actions: {
   //context是上下文参数对象
 addAsync(context){
   setTimeout(()=>{
       //这里还是通过调用mutation的方法来执行数据变更
     context.commit('add')
  },1000)
}
},

3、调用action

but3(){
   // this.$store.dispatch() 就是调用actions里面的方法
   this.$store.dispatch('addAsync')
}

getters

1、getter用于对store中的数据进行加工处理形成新的数据

（1）getter不会改变原来的state数据

（2）state数据发生变化，getter数据也会发上变化

2、定义getter

getters: {
 showNum(state){
   return "当前最新的数量是【"+state.count+1 +"】"
}
},

3、调用getter

this.$store.getters.定义的getter数据名称

Modules

1、存放定义的vuex模块

标签：count,vuex,state,getter,mutation,使用,数据,store
来源： https://www.cnblogs.com/huoyz/p/15879702.html