vuex管理页面标题
1、在store
-> mutation-types.js
文件新增常量
export const UPDATE_TITLE = 'UPDATE_TITLE'
2、新增文件title.js
目录结构如下 store
->moudules
->title.js
import * as types from '../mutation-types'
//state
export const state = {
navigationTitle : ''
}
//mutation
export const mutations = {
[types.UPDATE_TITLE](state,title){
Object.assign(state, { ...payload })
console.log(state.navigationTitle)
}
}
//actions
export const actions = {
saveTitle({commit, dispatch}, payload) {
commit(types.UPDATE_TITLE, payload)
},
}
//getters
export const getters = {
localTitle: state => {
return { ...state }
}
}
3、标题组件
<div>{{localTitle.navigationTitle}}</div>
export default {
computed:{
...mapGetters([
'localTitle'
])
},
}
4、各个页面
export default {
mounted(){
this.$store.dispatch('saveTitle',{
navigationTitle:this.title
})
}
}
vuex管理页面标题的更多相关文章
- django学习-26.admin管理后台里:修改登录页面标题,修改登录框标题,修改首页标题
目录结构 1.前言 2.完整的操作步骤 2.1.第一步:查看[site.py]的源码 2.2.第二步:在应用[hello]所在目录里的[admin.py]里重写三个属性的属性值 2.3.第三步:重启服 ...
- python 全栈开发,Day127(app端内容播放,web端的玩具,app通过websocket远程遥控玩具播放内容,玩具管理页面)
昨日内容回顾 1. 小爬爬 内容采集 XMLY 的 儿童频道 requests 2. 登陆 注册 自动登陆 退出 mui.post("请求地址",{数据},function(){} ...
- BBS--后台管理页面,编辑文章,xss攻击
1 1.对文章进行增删改查 # 后台管理url re_path(r'^cn_backend/$', views.cn_backend, name='cn_backend'), re_path(r'^c ...
- 8 功能6:后台管理页面,编辑文章,xss攻击
1.后台管理页面之文本编辑 # 后台管理url re_path(r'^cn_backend/$', views.cn_backend, name='cn_backend'), re_path(r'^c ...
- app端内容播放,web端的玩具,app通过websocket远程遥控玩具播放内容,玩具管理页面
一.app端内容播放 下载代码 https://github.com/987334176/Intelligent_toy/archive/v1.0.zip 注意:由于涉及到版权问题,此附件没有图片和音 ...
- 老男孩Day16作业:登录、注册、后台管理页面(动态)
一.作业需求: 1.后台管理主界面(左边菜单框.(全选.反选)框.返回顶部按钮) 2.老男孩登录.注册页面 二.博客地址:https://www.cnblogs.com/catepython/p/93 ...
- Django(四) 后台管理:创建管理员、注册模型类、自定义管理页面显示内容
后台管理 第1步.本地化:设置语言.时区 修改project1/settings.py #LANGUAGE_CODE = 'en-us' LANGUAGE_CODE = 'zh-hans' #设置语言 ...
- Bootstrap <基础二十三>页面标题(Page Header)
页面标题(Page Header)是个不错的功能,它会在网页标题四周添加适当的间距.当一个网页中有多个标题且每个标题之间需要添加一定的间距时,页面标题这个功能就显得特别有用.如需使用页面标题(Page ...
- 解决Django站点admin管理页面样式表(CSS style)丢失
参照这篇教程激活完django自带服务器的admin管理页面后,照着教程所描述的那样,尝试打开http://127.0.0.1:8000/admin/,发现自己的浏览器显示如下 很明显可以看出,虽然业 ...
随机推荐
- Spring quantz--定时任务调度工具
1.在xml中交给spring管理的一些类 <bean id="cancelOrderJobDetail" class="org.springframework.s ...
- opencv3 学习五 - 合并与分割通道
合并与分割通道 程序如下 #include "opencv2/opencv.hpp" using namespace cv; int main() { Mat original = ...
- [STM32F4][关于看门狗的那些事]
STM32(stm32f4XX系列)看门狗的总结: 1. 具有两个看门狗外设(独立和窗口)均可用于检测并解决由软件错误导致的故障:当计数器达到给定的超时值时,触发一个中断(仅适用于窗口看门狗)或产生一 ...
- 20154327 EXP8 Web基础
基础问题回答 (1)什么是表单? 表单:表单在网页中主要负责数据采集功能.一个表单有三个基本组成部分: 表单标签:这里面包含了处理表单数据所用CGI程序的URL以及数据提交到服务器的方法. 表单域:包 ...
- 成都Uber优步司机奖励政策(2月24日)
滴快车单单2.5倍,注册地址:http://www.udache.com/ 如何注册Uber司机(全国版最新最详细注册流程)/月入2万/不用抢单:http://www.cnblogs.com/mfry ...
- Qt-第一个QML程序-1-项目工程的建立
这个小程序是我发的第一个完整的QMl程序,这个程序也会持续的更新,一步一步的完善起来,最后会有一个什么样的结果也是不知道,只是把自己目前掌握的QML相关的东西都慢慢的写进来,积累起来 先展示一下运行结 ...
- AirtestIDE实践一:梦幻西游手游师门任务自动化
Airtest Project是网易自研的游戏自动化项目.Airtest IDE是这个项目的一个IDE,就像Eclipse.Pycharm一样,是一个集成开发工具.Airtest框架是一个基于Open ...
- 牛客练习赛26:D-xor序列(线性基)
链接:牛客练习赛26:D-xor序列(线性基) 题意:小a有n个数,他提出了一个很有意思的问题:他想知道对于任意的x, y,能否将x与这n个数中的任意多个数异或任意多次后变为y 题解:线性基 #inc ...
- vuex-Actions的用法
Action 类似于 mutation,不同在于: Action 提交的是 mutation,而不是直接变更状态. Action 是异步的,mutation是同步的. 沿用vuex学习---简介的案例 ...
- lintcode166 链表倒数第n个节点
链表倒数第n个节点 找到单链表倒数第n个节点,保证链表中节点的最少数量为n. 思路:设置两个指针first,second指向head,first指针先向前走n,然后两个指针一起走,first指针走到末 ...