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. 组件中使用具体方法时,需要注意语法规范