前端培训之vuex 核心概念和 API

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


上一篇:
下一篇:
关于尚硅谷
教育理念
名师团队
学员心声
资源下载
视频下载
资料下载
工具下载
加入我们
招聘岗位
岗位介绍
招贤纳师
联系我们
电话:010-56253825
邮箱:info@atguigu.com
地址:北京市昌平区宏福科技园综合楼6层(北京校区)

 深圳市宝安区西部硅谷大厦B座C区一层(深圳校区)

上海市松江区谷阳北路166号大江商厦6层(上海校区)