vuex中store存儲store.commit和store.dispatch的區別及用法

代碼演示： 

　　首先，我們假設state有以下數據

//類似組件data, 定義組件公共數據 
 state: {

    book: 'jQuery',

  },

　　然后我們要在組價中修改book, 現在mutations中定義修改的方法

  //類似組件methods, 定義修改state的方法
  mutations: {

    modifyBook(state, data) {
       // 當有提交載荷的時候就修改傳入的值，否則默認修改為React
        state.book = data || 'React'; 
    }

  },

　　 組件中調用 ，提醒： mutations 和 actions 都要在組件的methods中使用 ，而state和getters都是在組件中的computed中使用

 methods: {

    //提交modifyBook修改state的book
    modifyBook() {
      this.$store.commit('modifyBook');
    },

    
   /*
     等價於
     使用輔助函數 mapMutations
     ...mapMutations(['modifyBook']),
    */

}

　　　此時定義完成后就可以使用modifyBook方法進行修改state中book的值了。

 

　　　那么問題來了，那我修改完想做其他事情怎么辦呢？

　　　這就要用到 dispatch 來做好一些了。接着往下看！

　　　首先我們知道使用dispatch是在actions中使用的，所以我們要在actions中定義提交mutations的方法

actions: {

    actions1 ({commit}, data) {
        {commit} 等價於 context.commit

        //提交mutations的modifyBook
        (modifyBook   ==>  名稱要跟mutations中定義的一模一樣)
        commit('modifyBook', data);
    }

}         

  　　　　解答上面為什么寫成{commit}?

// 例

 actions: {
    ac1(context, data) {
      console.log('context ==> ', context);

      //context: 對象
      //context.commit: 用來提交當前模塊的mutations
      //context.dispatch: 用來提交當前模塊的actions
      //context.state: 用於操作當前模塊的state
      //context.getters: 用於操作當前模塊的getters
      //context.rootState: 用於操作全局的state
      //context.rootGetters: 用於操作全局的getters

    
     // 因為context是個對象，所以我們可以使用es6的解構出commit，所以寫成{commit}
    },
}    

　　　　  回到組件中的methods

 methods: {

    //提交modifyBook修改state的book
    modifyBook() {
      this.$store.commit('modifyBook');
    },

    
   /*
     等價於
     使用輔助函數 mapMutations
     ...mapMutations(['modifyBook']),
    */


     //通過actions提交mutations修改state
    action1() {
      //提交actions並且攜帶一個參數后，返回一個promise, 就可以執行異步操作
      this.$store.dispatch('action1', 'Bootstrap').then(（） => {
        console.log('我被執行了！');
      });
    },


     // 結果： 把state中book原本的值jQuery修改為了Bootstrap，並在控制台輸出了我被執行了！
}

　　　到此我們就可以知道 dispatch 在執行了mutations之后還可以做其他事情，比如進行本地存儲的一些其他操作。

　　　上述我們可以得出兩者的相同之處和區別：

　　　　　　1、commit 和 dispatch 兩個方法都是傳值給vuex的mutation改變state

　　　　　　2、區別總的來說他們只是存取方式的不同　　　　

 　　　　　　　　// commit: 用來提交當前模塊的mutations 

   　　　　　　     // dispatch: 用來提交當前模塊的actions(actions可以提交mutations,可以進行異步操作)  

　　　　　　　    // commit 有些做不到的可以用 dispatch 進行提交

　　　　　　3、 mutations修改state, action提交mutations。但是如果修改完還想做其他事情就用actions比較方便(then后執行想要做的事情) ==> this.$store.dispatch().then()

　　　　　　4、同步和異步之別

    　　　　　　　　commit: 同步操作

  　　　　　　　　  存儲 this.$store.commit('changeValue',name)

  　　　　　　　　  取值 this.$store.state.changeValue

    

  　　　　　　　　  dispatch: 異步操作

   　　　　　　　　 存儲 this.$store.dispatch('getlists',name)

   　　　　　　　　 取值 this.$store.getters.getlists