定义
- vuex是vue全局状态的管理工具
- vuex数据更新,其引用组件都会响应式的更新
模块
-
state
存放数据的地方
组件中
$store.state.xxxstate:{ cartNum:10 }
-
getters
从现有数据计算出新数据
组件中
$store.getters.xxxgetters:{ 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
module
- 把vuex的数据分成多个子模块(添加子组件)
- 定义模块 store/modules/cart.js
export default { state:{ goodlist:[]}, getters:{}, mutations:{}, actions:{} }
- 在store/index.js 导入模块
import cart from './modules/cart.js'
- 注册模块
modules:{ cart}
- 组件中 访问模块的state 需要添加模块名
$store.state.cart.goodlist
- 组件中访问 mutatioins,actions 中的方法,不需要添加模块名
$store.dispatch("addCart",good) $store.dispatch("getCart")
图解
常用单词
store仓库
commit 提交
dispatch 触发
state 状态/数据
mutations 改变
actions 动作
getters 获取器
modules 模块
模块的命名空间
- 作用:避免命名冲突
namespaced:true
- state的访问默认是有命名空间的
getters,actions,mutations需要开启后才有命名空间
-
vuex的映射
- mapState 把vuex的state在computed映射为组件的data
...mapState({ score:state=>state.test.score }) test是模块名,score数据名
- mapGetters
没有命名的空间
...mapGetters({ fee:"fee" }),
有命名空间
...mapGetters({ "rank":"test/rank" })
- mapMutations
没有命名空间
...mapMutations "setScore":"SETY_USERINFO" }
- mapActions
没有命名空间
...mapActions({ login:"login" }),
有命名空间
...mapActions({ log:"test/login" })