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
        })
    }
}

原文地址:https://www.cnblogs.com/littleBit/p/8994682.html

时间: 2024-07-29 19:23:46

vuex管理页面标题的相关文章

8 功能6:后台管理页面,编辑文章

1.后台管理页面之文本编辑 # 后台管理url re_path(r'^cn_backend/$', views.cn_backend, name='cn_backend'), re_path(r'^cn_backend/add_article/$', views.add_article, name='add_articles'), view视图 from django.shortcuts import render, HttpResponse, redirect from blog import

selenium之测试角色管理页面举例

# 测试角色权限管理页面功能 # author:xr # date:2017-07-20 from selenium import webdriver from login_page import LoginPage import random, time login_obj = LoginPage() driver = webdriver.Chrome() time.sleep(2) driver = login_obj.login(driver) # 登录 driver.find_eleme

Bootstrap 分页、标签、徽章、超大屏幕、页面标题

分页(pagination), 是一种无序列表 1.默认的分页(.pagination) 代码示例: 1 <ul class="pagination"> 2 <li><a href="#">«</a></li> 3 <li><a href="#">1</a></li> 4 <li><a href="#"

Bootstrap基础7(标签、徽章、大屏展播、页面标题、缩略图、进度条、面板、折叠效果)

<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> <title>标签.徽章.

Tomcat 管理页面

一.配置刚下载的解压版的apache-tomcat,启动后,通过浏览器访问:http://127.0.0.1:8080/(或者http://localhost:8080)然后点击下图的Server status X 在登录界面输入用户名 both 和密码 tomcat 后出现下面的错误提示:HTTP Status 403 - Access to the requested resource has been denied问题原因:D:\apache-tomcat\conf 目录下的tomcat-

SEO页面标题Title的优化

我在一个月前改过页面标题(Title),随后表现是:百度网页快照4天不更新,Google正常.而我仅仅是改了两个词组而已.在建博初期,修改Title的最频繁的时期,下面卢松松就我经历的修改Title过程给大家提供一些经验. 标题是网页优化最重要的因素,页面标题Title相当于赋予一个网页一些内容,它告诉搜索引擎蜘蛛此页面是关于什么的.所以任何一个网页Title的重要性是最高的,远远超过keyword和description. 1:如何保证Title不重复 这个问题很难解决,包括很多专门研究SEO

wordpress——在插件后台管理页面中添加javascript和ajax

最近在开发一个wordpress插件,需要在插件的后台管理页面上,添加自己写的javascript文件,以达到一些功能. 查了好几天的文档和资料,终于实现了. 这里先介绍下wordpress后台页面添加javascript的过程,再介绍添加ajax的过程. 添加javascript 首先我们需要知道wordpress插件开发的框架,然后再介绍javascript添加的步骤. 添加插件设置页面 开发插件,总需要在管理后台添加自己的插件设置页面.插件设置子页面,在这些页面中,可以设置和保存插件的一些

PHP和MySQL Web开发从新手到高手,第8天-创建categories管理页面

1. 创建categories管理页面   主要包含以下几个页面:   A. index.php, 准备各种变量数据.供展示页面使用.   B. categories.html.php, 显示categories.   C. form.html.php, 用于编缉或添加作者的页面. 页面郊果:   2. categories页面的主要流程 2.1 是否已登录 if (!user_is_login()){ include '../login.html.php'; exit(); } 2.2 是否有

PHP和MySQL Web开发从新手到高手,第6天-创建joke管理页面

1. 创建joke管理页面   主要包含以下几个页面:   A. index.php, 准备各种变量数据.供展示页面使用.   B. jokes.html.php, 显示joke.   C. form.html.php, 用于编缉或添加笑话的页面.   D. search.form.html.php, 用于搜索笑话的面面. 页面郊果:   2. index.php的主要流程 2.1 是否已登录 if (!user_is_login()){ include '../login.html.php';