1.首先,要明确两个方法的传参使用
①dispatch(“消息名”,参数)
②commit(函数名,{参数})/形参要用对象的形式包裹起来,不论形参是什么形式
2.将 多组共享的状态(数据) 写入state.js,作为初始化状态
对于各个组件中自己使用的状态就不需要再写入初始状态的state.js文件中了。
3.紧接着就进行 更新多组共享数据的方法 的vuex式的编写
①子组件中:组件中使用dispatch()向actions对象发送消息。
this.$store.dispatch("addTodo",todo);//更新数组的方法
②store文件中的 actions.js 文件的写法
/*
* 包含多个接收组件通知并且触发mutations调用间接更新状态的犯法
* */
import {ADD_DOTO} from "./mutation-types"
export default {
addTodo({commit},todo){ //接收所有组件发来的消息。注意:这里addTodo 和dispatch() 里面的消息名相同
commit(ADD_TODO,{todo}); //commit() 向mutations对象提交信息
}
}
③在 mutations types.js 文件中,收集 mutations.js 文件中所有的变量名.
还要在actions.js文件和mutations.js 文件中引入
/*
*所有mutation的名称常量
* */
export const ADD_DOTO = "add_todo";//添加todo的操作
④在 mutations.js 中,包含多个actions触发,并直接更新状态的方法。
注意:mutations对象中的方法中,从一般字符串整成变量,学要给字符串加上中括号
/*
* 包含多个actions触发并直接更新状态的方法的对象
* */
import {ADD_TODO} from "./mutation-types"
export default {//mutations对象中的方法中,从一般字符串整成变量,学要给字符串加上中括号
[ADD_TODO](state,{todo}){ //传过来的是{todo}对象,接收的参数也应该是{todo}对象,而不是单个参数todo
state.todos.unshift(todo);
}
}
上面就是vuex一个写更新 多组共享的状态 方法 的展示