目录
一、vuex作用
- vuex是vue的全局状态的管理工具
- vuex数据更新,其引用组件都会响应式的更新
- 如果项目不大,不建议使用vuex
二、五个属性方法
state
作用:
- 存放数据的地方
- vuex中的state数据同渲染指令可以渲染到vue组件中(响应式更新:数据变化视图会自动更新)
组件中使用方法:$store.state.xxx
实例:// state存储数据的地方 state: { cartNum: 10, price: 255, },
<p>商品数量 {{$store.state.cartNum}}</p>
getters
作用:从现有数据计算出新的数据
组件中使用方法:$store.getters.xxx
实例:// 从现有数据计算出新的数据 getters: { // 价格的百分50% // 从现有的价格计算出fee fee: function(state) { return state.price * 0.5; } },
<p>商品的提成:{{$store.getters.fee}}</p>
mutations
作用:mutations是改变vuex state中数据的唯一方式
组件中使用方法:$store.commit(方法,数据)
实例:// mutations是改变数据state的唯一方式 // 建议大写 mutations: { // 更改购物车的数量 SET_CARTNUM(state, data) { state.cartNum = data; } },
<!-- mutations改变cartNum commit 提交--> <button @click="$store.commit('SET_CARTNUM',18)"> 改变购物车18</button>
上方简单使用方式只能单个方法对应修改单个数据,下方来拓展延伸下
实现方法的公用性 同一方法修改多个数据 mutations: { setAppState(state, [key, value]) { state[key] = value; }, }
传入不同数据进行修改 this.$store.commit('setAppState', ["flag", true])
其他方法大家可尝试扩展。
actions
作用:
- actions动作,异步,延迟方法,不能直接修改state
- actions通过 commit 执行 mutations中的方法
组件中使用方法:$store.dispatch(方法,数据)
实例:// actions动作,异步,延迟方法,不能直接修改state actions: { setCart(context, data) { setTimeout(() => { // context就是$store // 等待4秒把执行SET_CARTNUM,传参参数data context.commit("SET_CARTNUM", data) }, 4000) } },
<button @click="$store.dispatch('setCart',100)">等4秒把购物车数量改为100</button>
modules 子模块
介绍:把store分为很多小模块,每一个模块都有自己的state,getters,action,mutation属性,最后合并到一起
使用:新建组件,导入新组件,方法中注册组件
自定义user模块内代码展示 export default { state: { list: { name: "彭于晏" } }, mutations: { SET_LIST(state, data) { state.list.name = data; } }, }
子模块在组件中使用
- 注意子模块中数据使用时要在.state后添加模块名
- 在模块里面访问方法不需要加模块名
<!-- 子模块中数据使用时要在.state后添加模块名 如.user --> {{$store.state.user.list.name}} <!-- 在模块里面访问方法不需要加模块名 --> <button @click="$store.commit('SET_LIST','tky')">单击更改</button>
前四种方法用法图示
三、vuex的映射
1、作用
把vuex的数据与方法映射为组件的数据与方法
模块的命名空间
作用:避免命名冲突 namespaced:true
state的访问默认是有命名空间的
getters,actions,mutations需要开启后才有命名空间
2、mapGetters
(1)没有命名空间
...mapGetters({
fee:"fee"
}),
...mapGetters(["fee"]),
(2)有命名空间
...mapGetters({
"rank":"test/rank"
})
3、mapMutations
(1)没有命名空间
...mapMutations({
"setUser":"SET_USERINFO"
})
(2)有命名空间
...mapMutaions:{
"setScore":"test/SET_SCORE"
}
4、mapActions
(1)没有命名空间
...mapActions({
login:"login"
}),
...mapActions(["login"])
}
(2)有命名空间
...mapActions({
log:"test/login"
})