Vuex中this.$store.commit()和this.$store.dispatch()區(qū)別是什么

這篇文章主要講解了“Vuex中this.$store.commit()和this.$store.dispatch()區(qū)別是什么”，文中的講解內(nèi)容簡(jiǎn)單清晰，易于學(xué)習(xí)與理解，下面請(qǐng)大家跟著小編的思路慢慢深入，一起來(lái)研究和學(xué)習(xí)“Vuex中this.$store.commit()和this.$store.dispatch()區(qū)別是什么”吧！

this.$store.commit()和this.$store.dispatch()的區(qū)別

兩個(gè)方法其實(shí)很相似，關(guān)鍵在于一個(gè)是同步，一個(gè)是異步

commit: 同步操作

this.$store.commit('方法名',值) //存儲(chǔ)
this.$store.state.'方法名' //取值

dispatch: 異步操作

this.$store.dispatch('方法名',值) //存儲(chǔ)
this.$store.getters.'方法名' //取值

當(dāng)操作行為中含有異步操作,比如向后臺(tái)發(fā)送請(qǐng)求獲取數(shù)據(jù),就需要使用action的dispatch去完成了,其他使用commit即可.

其他了解

• commit => mutations, 用來(lái)觸發(fā)同步操作的方法.

• dispatch => actions, 用來(lái)觸發(fā)異步操作的方法.

在store中注冊(cè)了mutation和action

在組件中用dispatch調(diào)用action,用commit調(diào)用mutation

Vuex應(yīng)用實(shí)例this.$store.commit()觸發(fā)

新建文件夾store,store下

action.js

const actions = {}
export default actions;

getter.js

const getters = {}
export default getters;

mutation-types.js

export const publicSetEvent = 'publicSetEvent';

mutations.js

import {publicSetEvent} from './mutation-types';
const mutations = {
    [publicSetEvent]: (state, json) => {
　　　　// 初始化默認(rèn)，避免跳轉(zhuǎn)路由時(shí)的公用部分顯示的相互影響
       state.publicSet = {headTitle: true,headNav: false,sTitle: '頭部標(biāo)題'}
// 是否顯示頭部title
        state.publicSet.headTitle = json.headTitle || state.publicSet.headTitle;
        // 是否顯示頭部tabbar切換
        state.publicSet.headNav = json.headNav || state.publicSet.headNav;
        // 頭部顯示的標(biāo)題文字
        state.publicSet.sTitle = json.sTitle || state.publicSet.sTitle;
        // tabbar的標(biāo)題文字及待辦badge數(shù)字
        state.publicSet.navList = json.navList || state.publicSet.navList;
    }
}
export default mutations;

index.js

import Vue from 'vue'
import Vuex from 'vuex'
import mutations from './mutations';
import getters from './getters';
import actions from './actions';
Vue.use(Vuex);
const state = {
    publicSet: {//設(shè)置公共頭
        headTitle: true,
        headNav: false,
        sTitle: '頭部標(biāo)題'
    }
}
const store = new Vuex.Store({
    state,
    getters,
    mutations,
    actions
});
export default store;

頭部公共組件components文件夾下

v-header.vue

<template>
  <div class="v-header">
    <vTitle v-if="publicSet.headTitle" :stitle="publicSet.sTitle"></vTitle>
  </div>
</template>

<script>
import vTitle from './v-title';
import {mapState} from 'vuex';
export default{
   name:'v-header',
   components:{vTitle},
   data(){
    return{
      
    }
   },
   computed: {
       ...mapState(['publicSet'])
   }
}
</script>

v-title.vue

<template>
  <div class="v-title">
      <XHeader :left-options="{backText:''}" :title="stitle"></XHeader>
  </div>
</template>

<script>
import { XHeader } from 'vux'
export default{
  name:'v-title',
  props:['stitle'],
  components:{XHeader},
  data (){
      return {
      }
  },
  methods: {
  }
}
</script>
<style lang="less">
</style>

App.vue

<template>
  <div id="app">
    <vHeader></vHeader>
    <router-view/>
  </div>
</template>

<script>
import vHeader from '@/components/header/v-header'
export default {
  name: 'app',
  components:{vHeader}
}
</script>

main.js

import Vue from 'vue'
import App from './App'
import router from './router'
import Vuex from 'vuex'
import store from './store'
Vue.use(Vuex)
Vue.config.productionTip = false
new Vue({
  el: '#app',
  router,
  store,
  components: { App },
  template: '<App/>'
})

頁(yè)面調(diào)用index.vue

<template>
    <div class="index">
    </div>
</template>

<script>
export default{
    name:'index',
    data(){
        return{
        }
    },
    created(){
    },
    beforeRouteEnter(to,from,next){
        let option={
          headTitle:true,
　　　　　　sTitle:'我是新標(biāo)題'
        }
        console.log(option);
        next(vm=>{
          vm.$store.commit('publicSetEvent',option);
        })
    },
    methods:{
    }    
}
</script>
<style lang="less">
</style>

運(yùn)行進(jìn)去index頁(yè)面就可以看到公共頭了

感謝各位的閱讀，以上就是“Vuex中this.$store.commit()和this.$store.dispatch()區(qū)別是什么”的內(nèi)容了，經(jīng)過(guò)本文的學(xué)習(xí)后，相信大家對(duì)Vuex中this.$store.commit()和this.$store.dispatch()區(qū)別是什么這一問(wèn)題有了更深刻的體會(huì)，具體使用情況還需要大家實(shí)踐驗(yàn)證。這里是億速云，小編將為大家推送更多相關(guān)知識(shí)點(diǎn)的文章，歡迎關(guān)注！