Vue+webpack New Project Summary 1

Headers for header components display different headings depending on the page

The first step:

Initialize global variables in store

//Vuex through state management dataImport vue from ' Vue 'Import Vuex from' Vuex 'Vue.use (VUEX) const store=NewVuex.store ({state: {//PublicComm: {loading:false, Login: {memberid:‘‘, UserData:‘‘}, indexconf: {isfooter:false,//whether to show bottomIsback:false,//whether to show returnTitle: "//title}}} , mutations: {/*Modify the header information*/changeindexconf: (state, data)={object.assign (state.comm.indexConf, data)}, actions: {}, getter: {}}) exportdefaultStore

Step Two:

　　Add a computed property to the head assembly so that the title can be changed dynamically

<template> <div class= "header" > <div class= "title" > <a @click = "GoBack" >< home</a> <span>{{title}}</span> </div> </div></template>< Script>Exportdefault{data:function () {              return {}        },        //calculated properties change dynamically based on the state of the storecomputed: {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>

Step Three:

　　Modify the title you need on each page (introduction to the header component)

default {        function  () {            return  {                title:' "        },        created () {              this. $store. Commit (' changeindexconf ', {                isfooter: False,                Isback:true,                title: 'components:{                    ')}, Comheader:header        }    }

Effect:

Vue+webpack New Project Summary 1