前端开发技术之vuex 核心概念和 API

1.state
1) vuex 管理的状态对象
2) 它应该是唯一的

conststate={

xxx:initValue

}
2.mutations
1) 包含多个直接更新 state 的方法(回调函数)的对象

2) 谁来触发:action 中的 commit(‘mutation 名称’)

3) 只能包含同步的代码, 不能写异步代码

constmutations={

yyy(state,{data1}){

// 更新 state 的某个属性

}

}

3.actions
1) 包含多个事件回调函数的对象

2) 通过执行:commit()来触发 mutation 的调用, 间接更新 state

3) 谁来触发: 组件中:$store.dispatch(‘action 名称’,data1) //’zzz’

4) 可以包含异步代码(定时器,ajax)

constactions={

zzz({commit,state},data1){

commit(‘yyy’,{data1})

}

}
4.getters
1) 包含多个计算属性(get)的对象

2) 谁来读取: 组件中:$store.getters.xxx

constgetters={

mmm(state){

return…
}
}
5.modules
1) 包含多个 module

2) 一个 module 是一个 store 的配置对象

3) 与一个组件(包含有共享数据)对应
6. 向外暴露 store对象
exportdefaultnewVuex.Store({ state, mutations, actions, getters })
7. 组件中
import{mapState,mapGetters,mapActions}from’vuex’ exportdefault{ computed:{ …mapState([‘xxx’]), …mapGetters([‘mmm’]), } methods:mapActions([‘zzz’]) }
{{xxx}}{{mmm}}@click=”zzz(data)”
8. 映射 store
importstorefrom’./store’ newVue({ store })
9.store对象
1) 所有用 vuex 管理的组件中都多了一个属性$store, 它就是一个 store 对象

2) 属性: state: 注册的 state 对象 getters: 注册的 getters 对象

3) 方法: dispatch(actionName,data): 分发调用 action

关注我，了解更多有关前端培训技术知识的 分享！

文章原文链接：http://www.atguigu.com/jsfx/11937.html