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 ...
随机推荐
- unity, imageEffect的最后一步blit所用的shader,应该关闭zwrite和ztest
给项目组做了个imageEffect特效,结果导致ngui不显示(ugui则不存在此问题),看ngui的一些shader,其中ztest是开着的,而且ui相机的Clear Flags用的是Don't ...
- RPC服务框架dubbo(四):Dubbo中Provider搭建
1.新建Maven Project, 里面只有接口(dubbo-service) 1.1 为什么这么做? RPC框架,不希望Consumer知道具体实现.如果实现类和接口在同一个项目中,Consume ...
- JSON传参
通过javascript将数据组织成json格式,然后传到java后台. 注意:前台json数组传参到后台时候需要将对象(json或json数组)转换成字符串(字符串数组). Simple: 1.前台 ...
- [svc]nfs客户端报错解决Stale file handle
NFS故障: 问题背景: 客户端挂载是好的.服务端磁盘满了,重新给挂了一快.客户端df -h 发现nfs挂载消失. 查看目录客户端报错:Stale file handle 现象如下: [root@n1 ...
- 每日英语:The Upside of Favoritism
As the head of the entertainment division of a major public-relations firm in New York, Janelle was ...
- Xcode常见问题
今天真机测试的时候,突然出现了这个错误: not have an architecture that “Administrator”的 iPhone (3) can execute. 原因是我刚刚修 ...
- MacBook Air 2014 安装win7
1.准备一个4G以上容量USB3.0 U盘.制作一个带USB3.0驱动的win7 2.将制作好的win7iso镜像文件复制到macbook上,插上U盘,运行Boot Camp助理: 3.选择默认勾选项 ...
- python操作word
python教程(百度经验) Python 操作Word(Excel.PPT等通用) import win32comfrom win32com.client import Dispatch, co ...
- devicetree -- SPI
SPI (Serial Peripheral Interface) busses SPI busses can be described with a node for the SPI master ...
- 微信小程序 - Util工具类
/utils/utils.js 已经扩展到App对象中,Page方法中直接使用 app.util.method(...) 调用. 1. 扩展String.replaceAll JS默认值提供re ...