1. First of all, it is necessary to clarify the parameter transfer of the two methods
①dispatch("message name", parameter)
②commit(function name, {parameter})/formal parameter should be wrapped in the form of an object, no matter what form the formal parameter is
2. The plurality of sets of state (data) of a shared write state.js, as the initialization state
for each state of the components do not need to use their initial state state.js write the file.
3. then immediately be updated multiple sets of data sharing method of vuex-style writing
① In the sub-component: dispatch () is used in the component to send messages to the actions object.
this.$store.dispatch("addTodo",todo);//更新数组的方法
②store file actions.js written documents
/*
* 包含多个接收组件通知并且触发mutations调用间接更新状态的犯法
* */
import {
ADD_DOTO} from "./mutation-types"
export default {
addTodo({
commit},todo){
//接收所有组件发来的消息。注意：这里addTodo 和dispatch() 里面的消息名相同
commit(ADD_TODO,{
todo}); //commit() 向mutations对象提交信息
}
}
③In the mutations types.js file, collect all the variable names
in the mutations.js file . Also include in the actions.js file and the mutations.js file
/*
*所有mutation的名称常量
* */
export const ADD_DOTO = "add_todo";//添加todo的操作
④ In mutations.js method, comprising a plurality of triggering actions, and directly update status.
Note: In the methods in the mutations object, the general string is transformed into a variable, and you have to add brackets to the string
/*
* 包含多个actions触发并直接更新状态的方法的对象
* */
import {
ADD_TODO} from "./mutation-types"
export default {
//mutations对象中的方法中，从一般字符串整成变量，学要给字符串加上中括号
[ADD_TODO](state,{
todo}){
//传过来的是{todo}对象，接收的参数也应该是{todo}对象，而不是单个参数todo
state.todos.unshift(todo);
}
}
Above is vuex a written update multiple sets of shared state display method