Vuex中this.$store.commit()和this.$store.dispatch()區(qū)別說明

更新時間：2022年04月02日 15:09:27 作者：拐鍋

這篇文章主要介紹了Vuex中this.$store.commit()和this.$store.dispatch()區(qū)別說明，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教

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

兩個方法其實很相似，關鍵在于一個是同步，一個是異步

commit: 同步操作

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

dispatch: 異步操作

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

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

其他了解

commit => mutations, 用來觸發(fā)同步操作的方法.
dispatch => actions, 用來觸發(fā)異步操作的方法.

在store中注冊了mutation和action

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

Vuex應用實例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) => {
　　　　// 初始化默認，避免跳轉(zhuǎn)路由時的公用部分顯示的相互影響
? ? ? ?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數(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: {//設置公共頭
? ? ? ? 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 = false
new Vue({
? el: '#app',
? router,
? store,
? components: { App },
? template: '<App/>'
})

頁面調(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:'我是新標題'
? ? ? ? }
? ? ? ? console.log(option);
? ? ? ? next(vm=>{
? ? ? ? ? vm.$store.commit('publicSetEvent',option);
? ? ? ? })
? ? },
? ? methods:{
? ? }? ??
}
</script>
<style lang="less">
</style>

運行進去index頁面就可以看到公共頭了

以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: