震惊！！！一天学会VUEX

VUEX定义：vue全局状态管理器（在任意组件/页面都可以访问vuex的数据)(当数据更新的时候，引用vuex的组件试图会自动更新)

例子：state{

                userlnfo:{name:"mumu",score:2500}

}

定义数据(state)：组件中访问:$store.state.userlnfo.score

例子：geeters:{

                gold(state){return Math.floor(state.userlfo.score/100)}

        }

计算数据(getters) :组件中访问:$store. getters. gold

例子:ADD_SCORE(state, data=100){
                state. userInfo. score+=data
        }

修改数据(mutations):组件中访问：$store.commit("ADD_SCORE",200)

例子：setScore(context.data){

setTimeout(()=>{

        context.commit("ADD_SCORE",data);

},2000)

}

异步操作(Actions):组件中访问:$store.dispatch("setScore",200)

 

 模块（modules）：把vuex又分成小的模块：
                                                                        

import cart from'./modules/cart. js
modules:{
   cart
}
cart. js
export default{
state:{},
getters:{},
mutations:{},
actions:{}.
namespace:true,//开启模块的命名空间
}

     组件中访问模块的state需要带模块名称(cart)：

$store. state. cart. goods
组件访问getters, actions, mutations不需要带模块名:$store. getters.totalPrice
开启namespace:true命名空间的模块：

getters, mutations, actions在组件访问的时候都要带模块名 

this.$store. dispatch("cart/addCart", data) 

actions第一个参数（context）：1. context相当与组件中的                                                               $store($store代表整个vuex，整个仓库)

   context. commit("mutations方法名",data)
   context. dispatch("actions中的方法名", data)
   context. state.数据名
   context. getters.数据名

  mutations第一个参数（state）   

getters第一个参数（state数据）                                                          

vue的射影方法 ：就是vuex中的state与getters映射为组件的                                  data数据(只读)
                            vuex中的actions和mutations映射为组件的                                  methods方法 

mapState：

01导入
      import {mapState, mapGetters,mapActions,mapMutations}from 'vuex'
02、在computed去计算computed:(
      //映射带模块cart
      …mapState((
            goods:state>state. cart. goods
        } ).
      //不带模块
      … mapState(["userInfo"])
        }
03、在组件使用映射出来属性
      <p>({goods}}</p>
      <p>({userInfo)}</p>
04、在computed去计算
      computed:{
          … mapGetters( ['totalPrice'])
      }

mapGetters：
     

01、在组件中使用
             <p>总价格:{(totalPricel}</p>

02、在methods方法里面扩展
                methods:{
                    … mapActions(["delCart"])
                }

mapActions：

01、在组件中调用方法
                <div @click="delCart(good. id)">
02、在methods方法里面扩展
                      methods:{
                        …mapMutations(["ADD_SCORE"])
                      }

mapMutations：

01、在组件中调用方法
                   <div@click="ADD_5CORE(500)">