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 = 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页面就可以看到公共头了
以上为个人经验，希望能给大家一个参考，也希望大家多多支持阿兔在线工具。
