2.1.state
1) vuex 管理的状态对象
2) 它应该是唯一的
conststate={
xxx:initValue
}
2.2.mutations
1) 包含多个直接更新 state 的方法(回调函数)的对象
2) 谁来触发:action 中的 commit(‘mutation 名称’)
3) 只能包含同步的代码, 不能写异步代码
constmutations={
yyy(state,{data1}){
// 更新 state 的某个属性
}
}
2.3.actions
1) 包含多个事件回调函数的对象
2) 通过执行:commit()来触发 mutation 的调用, 间接更新 state
3) 谁来触发: 组件中:$store.dispatch(‘action 名称’,data1) //’zzz’
4) 可以包含异步代码(定时器,ajax)
constactions={
zzz({commit,state},data1){
commit(‘yyy’,{data1})
}
}
2.4.getters
1) 包含多个计算属性(get)的对象
2) 谁来读取: 组件中:$store.getters.xxx
constgetters={
mmm(state){
return…
}
}
2.5.modules
1) 包含多个 module
2) 一个 module 是一个 store 的配置对象
3) 与一个组件(包含有共享数据)对应
2.6. 向外暴露 store对象
exportdefaultnewVuex.Store({ state, mutations, actions, getters })
2.7. 组件中
import{mapState,mapGetters,mapActions}from’vuex’ exportdefault{ computed:{ …mapState([‘xxx’]), …mapGetters([‘mmm’]), } methods:mapActions([‘zzz’]) }
{{xxx}}{{mmm}}@click=”zzz(data)”
2.8. 映射 store
importstorefrom’./store’ newVue({ store })
2.9.store对象
1) 所有用 vuex 管理的组件中都多了一个属性$store, 它就是一个 store 对象 2) 属性: state: 注册的 state 对象 getters: 注册的 getters 对象 3) 方法: dispatch(actionName,data): 分发调用 action
上一篇: 前端培训之vuex 理解
下一篇: 不报名大数据培训自学怎么样
