vue2.0开发实践总结之疑难篇

export default {
 data () {
 return {
  msg: 'header'
 }
 }
}

export default{
 data: function () {}, //data一定要是返回一个函数
  ponents: {
  Header: Header //声明组件
 }
 }

<template>
 <div class="-app">

  <-header></-header> //注意，html不区分大小写，所以需要将 Header 写成 -header 
 </div>
</template>

data  //vue对象的数据
methods //vue对象的方法
watch //对象监听的方法
puted //计算逻辑放到puted中
created //属性已绑定，dom未生成，一般在这里进行ajax处理以及页面初始化处理

const store = new Vuex.Store({
 state: {
 m: {
  loading: false, //是否显示loading
  apiUrl: 'http://.sherlochao.:9091/photosharing/', //接口base url
  imgUrl: 'http://.sherlochao.:9091/filebase', //图片base url
  indexConf: {
  isFooter: true, // 是否显示底部
  isSearch: true, // 是否显示搜索
  isBack: false, // 是否显示返回
  isShare: false, // 是否显示分享
  title: '' // 标题
  }
 }
 }
})

const store = new Vuex.Store({
mutations: {
 //loading的显示
 isLoading: (state, status) => {
  state.m.loading = status
 },
 //修改header的信息
 changeIndexConf: (state, data) => {
  Object.assign(state.m.indexConf, data)
 }
})

export default {
 data: function () {
  return {}
 },
 puted: {
  isShowSearch: function () {
  return this.$store.state.m.indexConf.isSearch //获取vuex里面 state 状态值
  },
  title: function () {
  return this.$store.state.m.indexConf.title
  },
  isBack: function () {
  return this.$store.state.m.indexConf.isBack
  }
 }
}

<template>
 <div class="header">
 <div v-show="isShowSearch"></div>
 <div class="title" v-show="!isShowSearch">
  <a v-show="isBack" class="back t-icon" @click="goBack"><span
  class="iconfont icon icon-xiangzuojiantou"></span></a>
  <p>{{title}}</p>
 </div>
 </div>
</template>

export default { 
 created: function () {
  vm.$store.mit('changeIndexConf', {
  isFooter: false,
  isSearch: false,
  isBack: true,
  isShare: true,
  title: '详情页'
  }) 
 }
 }

export default {
 watch: {
 '$route' (to, from) {
  // 对路由变化作出响应...
 }
 }
} 

router.beforeEach(function (to,from,next) {
 var userMsg = localStorage.getItem('userMsg')
 if(to.path === '/home'){
 if(!userMsg){
  next({ path: '/login' })
 }
 }
 next()
})