Vuex中this.$store.commit()和this.$store.dispatch()区别说明
目录
- this.$store.commit()和this.$store.dispatch()的区别
- commit: 同步操作
- dispatch: 异步操作
- 其他了解
- Vuex应用实例this.$store.commit()触发
- 新建文件夹store,store下
- 头部公共组件components文件夹下
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页面就可以看到公共头了
以上为个人经验,希望能给大家一个参考,也希望大家多多支持我们。
赞 (0)