组件传参和vuex

最新推荐文章于 2024-07-26 20:46:33 发布

initial627

最新推荐文章于 2024-07-26 20:46:33 发布

阅读量200

点赞数

文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/weixin_56004294/article/details/127435848

版权

一、组件的传参

父传子（props）
子传父事件（$emit）
引用父组件 $parent √
引用子组件 $children $refs
引用根组 $root (根组件最大组件)
事件bus传参（跨层级访问数据）（非父子关系）
1. 创建bus.js
```
 import Vue from 'vue'
        var bus  = new Vue();
        export default bus;
```
   2. 在要发送数据的组件中导入bus并使用 bus.$emit
   3. 在有接收数据的组件中导入bus 并使用 bus.$on (注意this)
   注意：任意组件只要导入bus 就可以随意的发送与监听数据
   bus.$on(eventname,callback) 监听事件
    bus.$emit(eventname,data)发送事件
    bus.$off(eventname)移除事件
provider和inject依赖注入跨层级访问(只读)
(1). provide提供数据所有子孙都可以通过inject注入数据
(2). inject 接收父辈组件提供的数据

什么是vuex ：

Vuex是一个专为Vue.js应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。Vuex也集成到Vue的官方调试工具devtools extension,提供了诸如零配置的time-travel调试、状态快照导入导出等高级调试功能。
什么情况下我应该使用Vuex?

虽然Vuex可以帮助我们管理共享状态，但也附带了更多的概念和框架。这需要对短期和长期效益进行权衡。
如果您不打算开发大型单页应用，使用Vuex可能是繁琐冗余的。确实是如此——如果您的应用够简单，您最好不要使用Vuex。一个简单的global event bus 就足够您所需了。但是，如果您需要构建是一个中大型单页应用，您很可能会考虑如何更好地在组件外部管理状态，Vuex将会成为自然而然的选择。
Vuex 实现数据的全局共享，响应式更新
state存放状态： $store.state.xxx访问

mutations改变状态的唯一方法

   SET_SCORE(state,data){}
    $store.commit("xxx",data)

actions异步操作数据的方式

changeScore(context,data){
  //在actions中访问mutations
  context.commit(“SET_SCORE”,data)
}
    $store.dispatch("xxx",data)

getters从现有的状态计算出新的数据

level(state){
   return state.user.score/100
}
    $store.getters.xxx

为什么要写api/login.js (定义api呢)
1 重复利用登录的api也会调用多次
2 方便集中管理所有的请求地址与请求方式 api文件中改请求方式与参数可以直接修改 api就可以，不用具体进入到某个组件

关注