Vuex大全

一、Vuex是什么

目录

一、Vuex是什么

二、Vuex模块

三、Vuex映射


vuex是vue的全局状态的管理工具
vuex数据更新,其引用组件都会响应式的更新

二、Vuex模块

state   存放数据的地方
组件中 :$store.state.xxx
state:{
    cartNum:10
}
getters  从现有数据计算出新的数据
组件中 :$store.getters.xxx
getters:{
    fee(state){
         return state.price*0.5
     }
}
 mutations  改变state(唯一方式)
组件中 :$store.commit(方法,数据)
mutations:{
    SET_CARTNUM(state,data){
      state.cartNum = data;
   }
}
 actions  异步方法
组件中 :$store.dispatch(方法,数据)
actions:{
    setCart(context,data){
        setTimeout(()=>{           
             context.commit("SET_CARTNUM",data)
         },4000)
     }
}
 modules 子模块

三、Vuex映射

mapState
把vuex的state在computed映射为组件的data
 ...mapState({
      score:state=>state.test.score
  })
test是模块名,score数据名
 mapGetters



没有命名空间
...mapGetters({
    fee:"fee"
}),
...mapGetters(["fee"]),
有命名空间
...mapGetters({
    "rank":"test/rank"
})
 mapMutations

没有命名空间
...mapMutations({
    "setUser":"SET_USERINFO"
})
有命名空间
...mapMutaions:{
    "setScore":"test/SET_SCORE"
}
 mapActions

没有命名空间
...mapActions({
    login:"login"
}),
...mapActions(["login"])
}
有命名空间
...mapActions({
    log:"test/login"
})

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值