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页面就可以看到公共头了
vuex应用实例-this.$store.commit()触发的更多相关文章
- vuex中的this.$store.commit
Vue的项目中,如果项目简单, 父子组件之间的数据传递可以使用 props 或者 $emit 等方式 进行传递 但是如果是大中型项目中,很多时候都需要在不相关的平行组件之间传递数据,并且很多数据需要多 ...
- Vue Vuex中的严格模式/实例解析/dispatch/commit /state/getters
严格模式 import getters from './getters' import mutations from './mutations' import actions from './acti ...
- Vue Vuex 严格模式+实例解析+dispatch/commit + state/getter
1.严格模式 import getters from './getters' import mutations from './mutations' import actions from './ac ...
- 解决vue不相关组件之间的数据传递----vuex的学习笔记,解决报错this.$store.commit is not a function
Vue的项目中,如果项目简单, 父子组件之间的数据传递可以使用 props 或者 $emit 等方式 进行传递 但是如果是大中型项目中,很多时候都需要在不相关的平行组件之间传递数据,并且很多数据需要 ...
- 【整理】解决vue不相关组件之间的数据传递----vuex的学习笔记,解决报错this.$store.commit is not a function
解决vue不相关组件之间的数据传递----vuex的学习笔记,解决报错this.$store.commit is not a function https://www.cnblogs.com/jaso ...
- vue vuex 提交 this.$store.commit({type: 'setSelectPro', selectPro: this.productId});
1.store.commit({'type':'mutation','parameter':'value'}); store.dispatch('action'); 2.获取state保存的值 sto ...
- vuex中this.$store.dispatch和this.$store.commit的区别(都是调用vuex中的方法。一个异步一个同步)
dispatch:含有异步操作,例如向后台提交数据,写法: this.$store.dispatch('action方法名',值) commit:同步操作,写法:this.$store.commit( ...
- vuex 使用实例
官网:https://vuex.vuejs.org/zh/guide/state.html Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式 1.vuex解决了组件之间同一状态的共享问题 ...
- 在Vuex使用 以及 dispatch和commit来调用mutations的区别
main.js中 import Vuex from 'vuex' Vue.use(vuex); const store = new Vuex.store({ state: { nickName: &q ...
随机推荐
- 为什么在c语言中使用gets函数是危险的
If you have code like this: char s[10]; gets( s ); and you type in more than 10 characters when th ...
- ubuntu下禁用和恢复触摸板
1.一般禁用选项在 settings > mouse and touchpad 中.(16.04通过实验)如果无法禁用或者希望恢复,向下看. 2.命令行键入: xinput ,插卡touchpa ...
- CHero
#ifndef __HERO_H__ #define __HERO_H__ #include "GameFrameHead.h" #include "GameParam. ...
- Oracle 11g客户端中文乱码问题
问题现象: 客户端安装完毕后,访问表内容,发现中文显示的都是?? 解决方案: 1.修改客户端注册表,路径为HKEY_LOCAL_MACHINE --->SOFTWARE ---> ORAC ...
- ISTQB测试人员认证 初级(基础级)大纲
ISTQB测试人员认证 初级(基础级)大纲 ---中文修订版本1(2015年5月6日) 2015-06-22 大纲pdf下载 ISTQB资料中心 在课程大纲中,每个章节都会提供相应的认知水平要求: ...
- 80X86寄存器介绍
80X86寄存器介绍 32位CPU所含有的寄存器有: 4个数据寄存器(EAX.EBX.ECX和EDX)2个变址和指针寄存器(ESI和EDI) 2个指针寄存器(ESP和EBP)6个段寄存器(ES.CS ...
- Oracle DBA面试突击题
一份ORACLE DBA面试题 一:SQL tuning 类 1:列举几种表连接方式 答: Oracle的多表连接算法有Nest Loop.Sort Merge和Hash Join三大类,每一类又可以 ...
- Android之SystemUI载入流程和NavigationBar的分析
Android之SystemUI载入流程和NavigationBar的分析 本篇仅仅分析SystemUI的载入过程和SystemUI的当中的一个模块StatusBar的小模块NavigationBar ...
- 概率dp - UVA 11021 Tribles
Tribles Problem's Link: http://acm.hust.edu.cn/vjudge/problem/viewProblem.action?id=33059 Mean: 有k个细 ...
- php 转码
//$names = iconv("UTF-8", "gb2312", $name); //等同于javascript encodeURI("电影&q ...