Vuex笔记: Vuex简介

1. vuex是什么

对vue应用中多个组件的共享状态进行集中式的管理(读/写)。

2. 状态自管理应用

单向数据流:
在这里插入图片描述

View:初始化显示,更新显示;以声明方式将state映射到视图。
Actions:更新状态的函数;相应在view上的用户输入导致的状态变化(包含N个更新状态的方法)。
State:状态数据;驱动应用的数据源。

3. 多组件共享状态

多个视图依赖于同一状态。
来自不同视图的行为需要变更同一状态。
以前的解决办法为:将数据以及操作数据的行为都定义在父组件;将数据以及操作数据的行为传递给需要的各个子组件(有可能需要多级传递)。
vuex就是用来解决这个问题的。
在这里插入图片描述

3.1 State

vuex管理的状态对象,它应该是唯一的。

const state = {
	xxx: initValue
}

3.2 Mutations

包含多个直接更新state的方法(回调函数)的对象。

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

3.3 Actions

包含多个事件回调函数的对象
通过执行commit()来触发mutation的调用,间接更新state

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

3.4 Getters

包含多个计算属性get方法的对象

const getters =  {
	mmm(state) {
		return}
}

3.5 向外暴露的store对象

export default new Vuex.Store ({
	state,
	mutations,
	actions,
	getters
})

6. 映射store

import store from './store'
new Vue({
	store
})

所有用vuex管理的组件中都多了一个属性$store,它就是一个store对象。
包含方法:

dispatch(actionName, data)    // 分发调用action
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值