vuex 结构图及vuex 核心概念和 API ╰半橙微兮° 2022-12-18 11:54 142阅读 0赞 ## vuex 结构图 ## ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzIxNTMxNjgx_size_16_color_FFFFFF_t_70_pic_center] ## vuex 核心概念和 API ## **1. state** * 1. vuex 管理的状态对象 * 1. 它应该是唯一的 const state = { xxx: initValue } **2. mutations** * 1. 包含多个直接更新 state 的方法(回调函数)的对象 * 1. 谁来触发: action 中的 commit(‘mutation 名称’) * 1. 只能包含同步的代码, 不能写异步代码 const mutations = { yyy (state, {data1}) { // 更新 state 的某个属性 } } **3. actions** * 1. 包含多个事件回调函数的对象 * 1. 通过执行: commit()来触发 mutation 的调用, 间接更新 state * 1. 谁来触发: 组件中: $store.dispatch(‘action 名称’, data1) // ‘zzz’ * 1. 可以包含异步代码(定时器, ajax) const actions = { zzz ({commit, state}, data1) { commit('yyy', {data1}) } } **4. getters** * 1. 包含多个计算属性(get)的对象 * 1. 谁来读取: 组件中: $store.getters.xxx const getters = { mmm (state) { return ... **5. modules** * 1. 包含多个 module * 1. 一个 module 是一个 store 的配置对象 * 1. 与一个组件(包含有共享数据)对应 **6.** **向外暴露** **store** **对象** export default new Vuex.Store({ state, mutations, actions, getters }) **7.** **组件中** import {mapState, mapGetters, mapActions} from 'vuex' export default { computed: { ...mapState(['xxx']), ...mapGetters(['mmm']), } methods: mapActions(['zzz']) } { {xxx}} { {mmm}} @click="zzz(data)" **8.** **映射** **store** import store from './store' new Vue({ store }) **9. store** **对象** * 1. 所有用 vuex 管理的组件中都多了一个属性$store, 它就是一个 store 对象 * 1. 属性: state: 注册的 state 对象 getters: 注册的 getters 对象 * 1. 方法: dispatch(actionName, data): 分发调用 action [watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzIxNTMxNjgx_size_16_color_FFFFFF_t_70_pic_center]: /images/20221122/8c54cf9b57b943f7b181c217f91568e4.png
还没有评论，来说两句吧...