Vuex中this.$store.commit()和this.$store.dispatch()区别是什么

这篇文章主要讲解了“Vuex中this.$store.commit()和this.$store.dispatch()区别是什么”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“Vuex中this.$store.commit()和this.$store.dispatch()区别是什么”吧！

this.$store.commit()和this.$store.dispatch()的区别

两个方法其实很相似，关键在于一个是同步，一个是异步

commit: 同步操作

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

dispatch: 异步操作

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

当操作行为中含有异步操作,比如向后台发送请求获取数据,就需要使用action的dispatch去完成了,其他使用commit即可.

其他了解

• commit => mutations, 用来触发同步操作的方法.

• dispatch => actions, 用来触发异步操作的方法.

在store中注册了mutation和action

在组件中用dispatch调用action,用commit调用mutation

Vuex应用实例this.$store.commit()触发

新建文件夹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) => {　　　　// 初始化默认，避免跳转路由时的公用部分显示的相互影响       state.publicSet = {headTitle: true,headNav: false,sTitle: '头部标题'}// 是否显示头部title        state.publicSet.headTitle = json.headTitle || state.publicSet.headTitle;        // 是否显示头部tabbar切换        state.publicSet.headNav = json.headNav || state.publicSet.headNav;        // 头部显示的标题文字        state.publicSet.sTitle = json.sTitle || state.publicSet.sTitle;        // tabbar的标题文字及待办badge数字        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: {//设置公共头        headTitle: true,        headNav: false,        sTitle: '头部标题'    }}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 = falsenew Vue({  el: '#app',  router,  store,  components: { App },  template: '<App/>'})

页面调用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:'我是新标题'        }        console.log(option);        next(vm=>{          vm.$store.commit('publicSetEvent',option);        })    },    methods:{    }    }</script><style lang="less"></style>

运行进去index页面就可以看到公共头了

感谢各位的阅读，以上就是“Vuex中this.$store.commit()和this.$store.dispatch()区别是什么”的内容了，经过本文的学习后，相信大家对Vuex中this.$store.commit()和this.$store.dispatch()区别是什么这一问题有了更深刻的体会，具体使用情况还需要大家实践验证。这里是编程网，小编将为大家推送更多相关知识点的文章，欢迎关注！