这篇文章主要讲解了“Vuex中this.$store.commit()和this.$store.dispatch()区别是什么”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“Vuex中this.$store.commit()和this.$store.dispatch()区别是什么”吧！
两个方法其实很相似，关键在于一个是同步，一个是异步
计算
安全
数据库
网络和加速
企业服务
this.$store.commit('方法名',值) //存储
this.$store.state.'方法名' //取值this.$store.dispatch('方法名',值) //存储
this.$store.getters.'方法名' //取值当操作行为中含有异步操作,比如向后台发送请求获取数据,就需要使用action的dispatch去完成了,其他使用commit即可.
commit => mutations, 用来触发同步操作的方法.
dispatch => actions, 用来触发异步操作的方法.
在store中注册了mutation和action
在组件中用dispatch调用action,用commit调用mutation
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;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/>'
})页面调用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()区别是什么这一问题有了更深刻的体会，具体使用情况还需要大家实践验证。这里是亿速云，小编将为大家推送更多相关知识点的文章，欢迎关注！
亿速云「云服务器」，即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘，价格低至29元/月。点击查看>>
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
