5.Vuex的使用及API

Vuex

5.1 理解 vuex

5.1.1 vuex 是什么

  1. 概念:专门在 Vue 中实现集中式状态(数据)管理的一个Vue 插件,对vue应用中多个组件的共享状态进行集中式的管理(读/写),也是一种组件间通信的方式,且适用于任意组件间通信。

  2. Github 地址: https://github.com/vuejs/vuex

5.1.2 什么时候使用 Vuex

  1. 多个组件依赖于同一状态

  2. 来自不同组件的行为需要变更同一状态

5.1.3 Vuex 工作原理图

官方图:
在这里插入图片描述

5.2 vuex 核心概念和 API

5.2.1 state

  1. vuex 管理的状态对象

  2. 它应该是唯一的 3. 示例代码

  3. 示例代码

    const state = {
    	xxxx:xxxx
    }
    

5.2.2 actions

  1. 值为一个对象,包含多个响应用户动作的回调函数

  2. 通过 commit( )来触发 mutation 中函数的调用, 间接更新state

  3. 如何触发 actions 中的回调?

    1. 在组件中使用: $store.dispatch(‘对应的 action 回调名’) 触发
  4. 可以包含异步代码(定时器, ajax 等等)

  5. 示例代码:

    const actions = {
    	zzz({commit,state},data1) {
    		commit('yyy',{data1})
    	}
    }
    

5.2.3 mutations

  1. 值是一个对象,包含多个直接更新 state 的方法

  2. 谁能调用 mutations 中的方法?如何调用?

    1. 在 action 中使用:commit(‘对应的 mutations 方法名’) 触发
  3. mutations 中方法的特点:不能写异步代码、只能单纯的操作state

  4. 示例代码:

    const mutations = {
    	yyy(state,{data1}){
    		//更新state的某个属性
    	}
    }
    

5.2.4 getters

  1. 值为一个对象,包含多个用于返回数据的函数

  2. 如何使用?—— $store.getters.xxx

  3. 示例代码:

    const getters = {
    	mmm(state){
    		return state.msg + '!'
    	}
    }
    

5.2.5 modules

1. 包含多个 module
2. 一个 module 是一个 store 的配置对象
3. 与一个组件(包含有共享数据)对应
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值