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. 組件中使用具體方法時，需要注意語法規範