vuex基本知识

在这里插入图片描述

Vuex是实现组件全局状态数据管理的一种机制,可以方便的实现组件之间的数据共享
好处:
易于开发和维护
实现数据共享
数据是响应式的,能够和页面保持同步

vuex的核心概念
State 公共数据源
Mutation 变更全局数据 不执行异步操作
Action 处理异步业务 但是在Action中还是要通过触发mutation的方式间接变更数据(在actions中不能直接修改state中的数据,必须通过context.commit()触发某个mutation才行)
只有Mutation中定义的函数才能修改state中的数据,别的函数想要修改只能间接
Getter **不会修改store里面的原数据,**用于对store中的数据进行加工处理 类似Vue的计算属性

组件中访问公共数据源的方法
1.this.$store.state.全局数据名称
2.在vuex中按需导入mapState函数
import { mapState } from ‘vuex’
将当前组件需要的全局数据,映射为当前组件的computed计算属性
computed: {
…mapState([‘全局数据名称’])
}

注意 1.只能通过mutation变更Store数据,不可以在组件中直接操作Store中的数据,例如this.$store,state,count++ 不合法(不方便维护)

2.触发mutation的第一种方法
this.$store.commit(‘方法名’)
commit的作用就是调用某个mutation函数
触发mutation的第二种方法
impore { mapMutation } from ‘vuex’
将需要的mutations函数映射到当前组件的methods方法
methods: {
…mapMutation([‘add’,‘addN’])
}

每个 mutation 都有一个字符串的 事件类型 (type) 和 一个 回调函数 (handler)

触发action的方式
1.this.$store.dispatch(‘函数名’)
2…mapActions([‘函数名’]),

使用getters的第一种方式
this.$store.getters.名称
使用getters的第二种方式
import { mapGetters } from ‘vuex’
computed: {
…mapGetters([‘名称’])
}

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值