vuex管理页面标题

Posted 2020-11-02 littleBit

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