没有合适的资源?快使用搜索试试~ 我知道了~
资源推荐
资源详情
资源评论
Vuex之理解之理解Mutations的用法实例的用法实例
本篇文章主要介绍了Vuex之理解Mutations的用法实例,小编觉得挺不错的,现在分享给大家,也给大家做个参
考。一起跟随小编过来看看吧
1.什么是什么是mutations??
上一篇文章说的getters是为了初步获取和简单处理state里面的数据(这里的简单处理不能改变state里面的数据),Vue的视图是由
数据驱动的,也就是说state里面的数据是动态变化的,那么怎么改变呢,切记在Vuex中store数据改变的唯一方法就是mutation!
通俗的理解mutations,里面装着一些改变数据方法的集合,这是Veux设计很重要的一点,就是把处理数据逻辑方法全部放
在mutations里面,使得数据和视图分离。
2.怎么用怎么用mutations??
mutation结构:每一个mutation都有一个字符串类型的事件类型(type)和回调函数(handler),也可以理解为{type:handler()},这和订阅
发布有点类似。先注册事件,当触发响应类型的时候调用handker(),调用type的时候需要用到store.commit方法。
const store = new Vuex.Store({
state: {
count: 1
},
mutations: {
increment (state) { //注册时间,type:increment,handler第一个参数是state;
// 变更状态
state.count++}}})
store.commit('increment') //调用type,触发handler(state)
载荷(payload):简单的理解就是往handler(stage)中传参handler(stage,pryload);一般是个对象。
mutations: {
increment (state, n) {
state.count += n}}
store.commit('increment', 10)
mutation-types:将常量放在单独的文件中,方便协作开发。
// mutation-types.js
export const SOME_MUTATION = 'SOME_MUTATION'
// store.js
import Vuex from 'vuex'
import { SOME_MUTATION } from './mutation-types'
const store = new Vuex.Store({
state: { ... },
mutations: {
// 我们可以使用 ES2015 风格的计算属性命名功能来使用一个常量作为函数名
[SOME_MUTATION] (state) {
// mutate state
}
}
})
commit:提交可以在组件中使用 this.$store.commit('xxx') 提交 mutation,或者使用 mapMutations 辅助函数将组件中的 methods 映射为
store.commit 调用(需要在根节点注入 store)。
import { mapMutations } from 'vuex'
export default {
methods: {
...mapMutations([
'increment' // 映射 this.increment() 为
this.$store.commit('increment')]),
...mapMutations({
add: 'increment' // 映射 this.add() 为
this.$store.commit('increment')
})}}
3.源码分析
registerMutation:初始化mutation
function registerMutation (store, type, handler, path = []) {
//4个参数,store是Store实例,type为mutation的type,handler,path为当前模块路径
资源评论
weixin_38614825
- 粉丝: 6
- 资源: 951
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功