首页 > 其他 > 详细

vuex管理页面标题

时间:2018-05-05 15:01:37      阅读:225      评论:0      收藏:0      [点我收藏+]

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管理页面标题

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

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!