39-vuex-多组共享的状态及其更新方法的写法

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一个写更新 多组共享的状态 方法 的展示