vuex的解释

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

1.定义数据：state

例子：state：{userInfo：{name："xxx"，score：2500}}

组件中访问  $store.state.userInfo.score

2.计算数据getters

例子：getters：{gold(state){return Math.floor(state.userInfo.score/100)}

组件中访问$store.getters.gold

3.修改数据mutations

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

组件中访问 $store.commit("ADD_SCORE",200)

4.异步操作Actions

例子：setScore（context，data）{

        setTimeout（（）=>{

                context.commit("ADD_SCORE",data);

        },2000）

}

组件中访问$store.dispatch("setScore",200)

5.模块modules

把vuex又分为小的模块

1.import cart from'./modules/cart.js'

modules:{cart}

2.建立新的文件cart.js

export default{

        state：{}，

        getters：{}，

        mutations：{}，

        actions：{}，

        namespace：true，//开启模块的命名空间

}

3.组件中访问模块的state需要带模块名称（cart）$store.state.cart.goods

组件访问getters，actions，mutations不需要带模块名$store.getters.totaIPrice

4.开启namespace：true命名空间的模块，

getters，mutations，actions在组件中访问的时候都是带模块名

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

6.参数

1.actions第一个参数context

1.context相当于组件中的$store

$store代表整个vuex，整个仓库

2.context.commit（"mutations方法名"，data）

3.context.dispatch（"actions中的方法名"，data）

4.context.state.数据名    context.getters.数据名

2.mutations 第一个参数state

3.getters 第一个参数 state数据

7.vuex映射方法

1.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>

2.mapGetters

01.在computed 去计算

computed：{

        ...mapGetters（["totalPrice"]）

}

02.在组件中使用

<p>总价格：{totalPrice}</p>

 

3.mapActions

01.在methods方法里面扩展

methods：{

        ...mapActions（["delCart"]）

}

02.在组件中调用方法

<div @click="delCart(good.id)">

4.mapMutations

01.在methods方法里面扩展

methods：{

        ...mapMutations（[ADD_SCORE]）

}

02.在组件中调用方法

<div @click="ADD_SCORE(500)">

就是vuex中的state与getters映射为组件的data数据（只读）

vuex中的state与getters映射为组件的methods方法