Shulou(Shulou.com)06/01 Report--

This article mainly explains "what is the difference between this.$store.commit () and this.$store.dispatch () in Vuex". The content in the article is simple and clear, and it is easy to learn and understand. Please follow the editor's train of thought to study and learn what is the difference between this.$store.commit () and this.$store.dispatch () in Vuex.

The difference between this.$store.commit () and this.$store.dispatch ()

The two methods are actually very similar. The key is that one is synchronous and the other is asynchronous.

Commit: synchronous operation this.$store.commit ('method name', value) / / Storage this.$store.state.' Method name'/ / value dispatch: asynchronous operation this.$store.dispatch ('method name', value) / / store this.$store.getters.' Method name'/ / value

When the operation contains asynchronous operations, such as sending requests to the background to obtain data, you need to use action's dispatch to complete, others can use commit.

Other understanding

Commit = > mutations, the method used to trigger a synchronous operation.

Dispatch = > actions, the method used to trigger an asynchronous operation.

Registered mutation and action in store

Call action with dispatch and mutation with commit in the component

Vuex application instance this.$store.commit () triggers a new folder under 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) = > {/ / initialize the default to avoid the interaction between the common parts of the hop route state.publicSet = {headTitle: true,headNav: false,sTitle: 'header title'} / / whether to display the header title state.publicSet.headTitle = json.headTitle | | state.publicSet.headTitle / / whether to display the header tabbar toggle state.publicSet.headNav = json.headNav | | state.publicSet.headNav; / / the title text displayed in the header state.publicSet.sTitle = json.sTitle | | state.publicSet.sTitle; / / tabbar title text and pending badge digits 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: {/ / set the common header headTitle: true, headNav: false, sTitle: 'header'}} const store = new Vuex.Store ({state, getters, mutations, actions}); export default store Under the header common components components folder

V-header.vue

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

V-title.vue

Import {XHeader} from 'vux'export default {name:'v-title', props: [' stitle'], components: {XHeader}, data () {return {}}, methods: {}}

App.vue

Import vHeader from'@ / components/header/v-header'export default {name: 'app', components: {vHeader}}

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:''})

Page calls index.vue

Export default {name:'index', data () {return {}}, created () {}, beforeRouteEnter (to,from,next) {let option= {headTitle:true, sTitle:' I am the new title'} console.log (option); next (vm= > {vm.$store.commit ('publicSetEvent',option)) })}, methods: {}}

Run into the index page and you can see the public header.

Thank you for your reading, the above is the content of "what is the difference between this.$store.commit () and this.$store.dispatch () in Vuex". After the study of this article, I believe you have a deeper understanding of what is the difference between this.$store.commit () and this.$store.dispatch () in Vuex, and the specific use needs to be verified in practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.