vue+webpack新項目總結1
阿新 • • 發佈:2017-10-27
技術分享 ted back index nbsp 不同的 style color actions
頭部組件的 標題 根據不同的頁面顯示不同的標題
第一步:
在store 裏面初始化全局變量
// vuex 通過狀態管理數據 import Vue from ‘vue‘ import Vuex from ‘vuex‘ Vue.use(Vuex) const store = new Vuex.Store({ state: { // 公共 comm: { loading: false, login: { memberId: ‘‘, userData: ‘‘ }, indexConf: { isFooter:false, // 是否顯示底部 isBack: false, // 是否顯示返回 title: ‘‘ // 標題 } } }, mutations: { /*修改header的信息*/ changeIndexConf: (state, data) => { Object.assign(state.comm.indexConf, data) }, }, actions: { }, getter: { } }) export default store
第二步:
在頭部組件中添加計算屬性,使得title可以動態變化
<template> <div class="header"> <div class="title"> <a @click="goBack">< Home</a> <span>{{title}}</span> </div> </div> </template> <script> export default{ data: function() { return {} }, //計算屬性 會根據store的狀態改變來動態改變 computed: { title: function () { return this.$store.state.comm.indexConf.title }, isBack: function () { return this.$store.state.comm.indexConf.isBack } }, methods: { goBack: function(){ history.go(-1); } } } </script>
第三步:
在每個(引入頭部組件的)頁面修改自己需要的title
export default{ data: function () { return { title:‘Markets‘ } }, created () { this.$store.commit(‘changeIndexConf‘, { isFooter: false, isBack: true, title: ‘Markets‘ }) }, components:{ comHeader:Header } }
效果:
vue+webpack新項目總結1