新建文件夹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页面就可以看到公共头了

vuex应用实例-this.$store.commit()触发的更多相关文章

  1. vuex中的this.$store.commit

    Vue的项目中,如果项目简单, 父子组件之间的数据传递可以使用 props 或者 $emit 等方式 进行传递 但是如果是大中型项目中,很多时候都需要在不相关的平行组件之间传递数据,并且很多数据需要多 ...

  2. Vue Vuex中的严格模式/实例解析/dispatch/commit /state/getters

    严格模式 import getters from './getters' import mutations from './mutations' import actions from './acti ...

  3. Vue Vuex 严格模式+实例解析+dispatch/commit + state/getter

    1.严格模式 import getters from './getters' import mutations from './mutations' import actions from './ac ...

  4. 解决vue不相关组件之间的数据传递----vuex的学习笔记,解决报错this.$store.commit is not a function

    Vue的项目中,如果项目简单, 父子组件之间的数据传递可以使用  props 或者 $emit 等方式 进行传递 但是如果是大中型项目中,很多时候都需要在不相关的平行组件之间传递数据,并且很多数据需要 ...

  5. 【整理】解决vue不相关组件之间的数据传递----vuex的学习笔记,解决报错this.$store.commit is not a function

    解决vue不相关组件之间的数据传递----vuex的学习笔记,解决报错this.$store.commit is not a function https://www.cnblogs.com/jaso ...

  6. vue vuex 提交 this.$store.commit({type: 'setSelectPro', selectPro: this.productId});

    1.store.commit({'type':'mutation','parameter':'value'}); store.dispatch('action'); 2.获取state保存的值 sto ...

  7. vuex中this.$store.dispatch和this.$store.commit的区别(都是调用vuex中的方法。一个异步一个同步)

    dispatch:含有异步操作,例如向后台提交数据,写法: this.$store.dispatch('action方法名',值) commit:同步操作,写法:this.$store.commit( ...

  8. vuex 使用实例

    官网:https://vuex.vuejs.org/zh/guide/state.html Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式 1.vuex解决了组件之间同一状态的共享问题 ...

  9. 在Vuex使用 以及 dispatch和commit来调用mutations的区别

    main.js中 import Vuex from 'vuex' Vue.use(vuex); const store = new Vuex.store({ state: { nickName: &q ...

随机推荐

  1. 为什么在c语言中使用gets函数是危险的

      If you have code like this: char s[10]; gets( s ); and you type in more than 10 characters when th ...

  2. ubuntu下禁用和恢复触摸板

    1.一般禁用选项在 settings > mouse and touchpad 中.(16.04通过实验)如果无法禁用或者希望恢复,向下看. 2.命令行键入: xinput ,插卡touchpa ...

  3. CHero

    #ifndef __HERO_H__ #define __HERO_H__ #include "GameFrameHead.h" #include "GameParam. ...

  4. Oracle 11g客户端中文乱码问题

    问题现象: 客户端安装完毕后,访问表内容,发现中文显示的都是?? 解决方案: 1.修改客户端注册表,路径为HKEY_LOCAL_MACHINE --->SOFTWARE ---> ORAC ...

  5. ISTQB测试人员认证 初级(基础级)大纲

    ISTQB测试人员认证 初级(基础级)大纲 ---中文修订版本1(2015年5月6日) 2015-06-22 大纲pdf下载  ISTQB资料中心 在课程大纲中,每个章节都会提供相应的认知水平要求: ...

  6. 80X86寄存器介绍

    80X86寄存器介绍  32位CPU所含有的寄存器有: 4个数据寄存器(EAX.EBX.ECX和EDX)2个变址和指针寄存器(ESI和EDI) 2个指针寄存器(ESP和EBP)6个段寄存器(ES.CS ...

  7. Oracle DBA面试突击题

    一份ORACLE DBA面试题 一:SQL tuning 类 1:列举几种表连接方式 答: Oracle的多表连接算法有Nest Loop.Sort Merge和Hash Join三大类,每一类又可以 ...

  8. Android之SystemUI载入流程和NavigationBar的分析

    Android之SystemUI载入流程和NavigationBar的分析 本篇仅仅分析SystemUI的载入过程和SystemUI的当中的一个模块StatusBar的小模块NavigationBar ...

  9. 概率dp - UVA 11021 Tribles

    Tribles Problem's Link: http://acm.hust.edu.cn/vjudge/problem/viewProblem.action?id=33059 Mean: 有k个细 ...

  10. php 转码

    //$names = iconv("UTF-8", "gb2312", $name); //等同于javascript encodeURI("电影&q ...