组件传参及Vuex基础

28 篇文章 0 订阅
19 篇文章 0 订阅

组件传参

父传子 props

子传父 事件$emit

引用父 组件$parent

引用子组件

$children
$refs

引用根组件

$root //根组件 最大组件

事件bus传参(跨层级访问数据)(非父子关系)

    1. 创建bus.js
    • import Vue from 'vue'
    • var bus = new Vue();
    • export default bus;
    1. 在要发送数据的组件中导入bus并使用 bus.$emit
    1. 在有接收数据的组件中导入bus 并使用 bus.$on (注意this)
    • bus.$on(eventname,callback) 监听事件
    • bus.$emit(eventname,data)发送事件
    • bus.$off(eventname)移除事件
      注意:任意组件只要导入bus 就可以随意的 发送与监听数据

provider和inject依赖注入跨层级访问(只读)

  • provide提供数据所有子孙都可以通过inject注入数据
  • inject 接收父辈组件提供的数据

Vuex基础

解释

  • Vuex是实现组件全局状态(数据)管理的一种机制,可以方便的实现组件之间数据的共享。
  • Vuex 实现数据的全局共享,响应式更新
  • 能够在vuex中集中管理共享的数据,易于开发和后期维护
  • 能够高效地实现组件之间的数据共享, 提高开发效率
  • 存储1在vuex中的数据都是响应式的,能够实时保持数据与页面的同步
  • 一般情况下,只有组件之间共享的数据,才有必要存储到vuex中;对于组件中的私有数据,依旧存储在组件自身的data中即可。

定义store对象

import Vue from 'vue' //导入
import Vuex from 'vuex' 

Vue.use(Vuex) //使用

export default new Vuex.Store({  //创建store对象
  state: {
  },
  getters: {
  },
  mutations: {
  },
  actions: {
  },
  modules: {
  }
})
//(4).将store对象挂载到vue实例中
new Vue ({
     el: '#app',
     render: h => h(app) ,
     router ,
    //将创建的共享数据对象,挂载到vue实例中,所有的组件,就可以直接从store 中获取全局的数据了
     store
})
// store仓库 ,state状态(数据),getters获取器,
// mutations变异改变,actions动作 ,modules模块

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

moudel 子模块

  • 把登录功能放在store/moudules/userjs actions
  • loginView.vue页面执行登录
  • 实现store/modules/user.js实现注销
  • 实现登录成功提示,登录失败提示

为什么要把登录转换到vuex中

  • 登录后成功的数可以全局共享
  • 为了重复利用登录功能可能不止在登录页面
    • 首页点击弹框登录
    • 购物车 跳转前,弹框登录
    • 登录位置会有很多如果写在Vuex只需要在登录地方使用
      $store.dispatch("login",data) 方法就可以

为什么要写api/login.js (定义api呢)

  • 重复利用
    • 登录的api也会调用多次
  • 方便集中管理
    • 所有的请求地址与请求方式 api文件中
    • 修改请求方式与参数可以直接修改 api内容就可以,不用具体进入到某个组件
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值