index.js
import Vue from "vue"
import Vuex from "vuex"
Vue.use(Vuex)
export default new Vuex.Store({
state: {
city: ""
}
})
main.js
import Vue from "vue"
import App from "./App"
import router from "./router"
import fastClick from "fastclick"
import VueAwesomeSwiper from "vue-awesome-swiper"
import store from "./store"
import "styles/reset.css"
import "styles/border.css"
import "styles/iconfont.css"
import "swiper/dist/css/swiper.css"
Vue.config.productionTip = false
fastClick.attach(document.body)
Vue.use(VueAwesomeSwiper)
/* eslint-disable no-new */
new Vue({
el: "-sharpapp",
router,
store,
components: {App},
template: "<App/>"
})
Header.vue
<template>
<div class="header">
<div class="header-left">
<div class="iconfont back-icon"></div>
</div>
<div class="header-input">
<span class="iconfont"></span>
//
</div>
<router-link to="/city">
<div class="header-right">
{{this.$store.state.city}}
<span class="iconfont arrow-icon"></span>
</div>
</router-link>
</div>
</template>
<script>
export default {
name: "HomeHeader"
}
</script>
<style lang="stylus" scoped>
@import "~styles/variables.styl";
.header
display: flex
line-height: $headerHeight
background: $bgColor
color:-sharpfff
.header-left
width: .64rem
float: left
.back-icon
text-align: center
font-size: .4rem
.header-input
flex: 1
height: .64rem
line-height: .64rem
margin-top: .12rem
margin-left: .2rem
padding-left: .2rem
background: -sharpfff
border-radius: .1rem
color: -sharpccc
.header-right
width: 1.24rem
float: right
text-align: center
color: -sharpfff
.arrow-icon
margin-left: -.04rem
font-size: .2rem
</style>