veux第二节 mutations和actions/modules

mutations

更改 Vuex 的 store 中的状态的唯一方法是提交 mutation(类似 redux 中的 action + reducer),Vuex 中的 mutation 非常类似于事件:每个 mutation 都有一个字符串的 事件类型 (type) 和 一个 回调函数 (handler)
mutation 中的函数不要直接调用

mutation 中的函数被 commit 执行的时候,接收两个参数
mutations中的方法会自动接收两个参数 mutations中 addNewUserVal方法和methods中传递的方法一致
参1:state 当前vuex实例的仓库
参2:通过commite方法传递过来的参数,自定义(这里就是value中的数据)

  mutations: {
    addNewUserVal(state,paload){ 
      state.users.push({
        id:++nextId, //id自动加1
        username:paload, //添加名称
        gender:"女",  //性别
        checked:false,
      })
    }
  },

actions

action 中的函数与 mutation 中的函数类似,但是它主要用来进行异步任务的处理,然后通过提交 mutation 来修改 state
异步的处理在actions里面处理,然后通过commmit提交给
actions中的方法第一参数默认为store
actions中的方法第一参数默认store 想使用state需要结构一下 state是store下的数据
第二个参数 在传递过来的时候 是个对象

  actions: {
    addNewUserVal({state,commit},{paload}){
      return new Promise((resolve,reject)=>{ //Promise封装setTimeout 执行成功 执行失败
        setTimeout(()=>{ 
          // 数据库里用户名 与传进来的名字 如果有
          if(state.users.find(user=>user.username ===paload)){
            reject("已经存在改用户") //失败返回的信息
          }else{
            // 这还得转交给mutations,使用commit进行处理 (看图)
            commit("addNewUserVal",paload) 
            resolve('添加成功')      
          }
        },1000)
      })
    }
  },

modules

modules把 vueX模块化,把 内容(用户、商品)分别都封装在外部 原本的index.js像一个总控
本来vuex 就是处理数据量较大的内容,modules有把veux模块快 处理更大的数据量
vuex 模块化:
1.将当前业务所需内容 封装到独立的js文件中,以对象的形式导出
2. 在index.js(主控), 的modules中 注册模块
3. 组件中使用具体方法时,需要注意语法规范

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Jason–json

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值