vuex用法

5个核心概念

• state:状态

state单一状态树：只使用一个store进行管理

const store=new Vuex.Store({
    state:{
    counter:1
    }
})

获取数据的方法： $store.state.conter

• getters:类似于的计算属性

{{$store.getters.powerCounter}}


getters:{
    powerCounter(state){
        return state.counter*state.counter
}
}

使用场景：数据需要进行一系列变化

 

• mutations: vuex的store更新的唯一方式：提交mutation   包括两个部分：事件类型和回调函数     例如：

mutations:{
//increase叫事件类型
    increase(state){
//回调函数
        //普通的提交风格
        this.$store.commit('increase')
        //特殊的提交风格
        this.$store.commit({
            type:'increase',
            count:1
        })
    }
}

回调函数的第一个参数就是state 参数被称作mutation的负载（payload）

mutation中必须使用同步方法，因为异步操作无法使dev-tools跟踪操作

• action:做异步操作  本质是通过action修改mutaion 再通过mutation修改state

actions:{
    //参数不再是state 变成了context
    apdate(context){
      //不能在这里进行异步操作
      setTimeout(()=>{
        context.commit('updateInfo')
      },1000)
    }
  }

 

• modules:防止单一状态树导致的数据过于臃肿而出现的  

 modules:{
    a:{
      state:{},
      mutations:{},
      actions:{},
      getters:{}
    },
    b:{
      state:{},
      mutations:{},
      actions:{},
      getters:{}
    },
modules:{
       a:moduleA
}

  }

使用时  {{$store.state.a}}  要注意在state里面取modules