vuex

vue中。父与子，子与父通信好说。不过也有点麻烦，代码多

但是平级之间的组件通信，或者多组件之间通信，管理起来就相当复杂了

vuex就是干这个的

 

一个简单的demo

比如，我footer变了，我想让我的title也变化。

首先在main.js中创建一个vuex的stroe，并注入到全局，从此store就是全局的数据仓库。vuex就是通过这个store来管理全局通信大法了（有用的局部代码）

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const Store=Vuex.Store;
const store = new Store({
  state : {
    footTitle:''//我定义了‘footer标题’
  },
  mutations: {
    //底部导航变化事件：只要变化，我就讲传给我的值，赋值到state 的footTitle中
    footChange(state,param) {
      state.footTitle=param
    }
  }
})

 

 

其次我在底部导航组件myfoot.vue中触发该事件

<template>
  <div class="myfoot">
    <div class="myfootItem" v-for="(item,index) in foots" v-bind:class="{'active':item.active}" @click="go(index)">
      <i class="iconfont" :class="item.icon"></i>
      <div class="itemTitle">{{item.text}}</div>
    </div>
  </div>
</template>

<script>
    export default {
        name: "myfoot",
        data:function () {
          return{
            foots:[
              {text:'主页',hrf:'/',active:true,icon:'icon-home'},
              {text:'博客', hrf:'/about',active:false,icon:'icon-blog'},
              {text:'关于', hrf:'/about',active:false,icon:'icon-me'}
            ]
          }
        },
      methods:{
          go(index){
            this.foots.forEach(function (item) {
              item.active=false
            })
            this.foots[index].active=true;
            this.$router.push(this.foots[index].hrf)
            this.$store.commit('footChange',this.foots[index].text)//切换导航，顶部组件的标题也要更新，所以触发该事件
          }
      },
      created: function () {
          let vm=this;
　　　　　　//初始化进入。底部导航默认选中的，也因该触发该vuex事件，进行标题更新
          this.foots.forEach(function (item) {
            if(item.active){
              vm.$store.commit('footChange',vm.foots[0].text)
            }
          })
      }

    }
</script>

 

最后就是顶部导航组件myhead.vue就能够实时更新store里的footTitle字段了

<template>
  <div class="myhead">
    {{this.$store.state.footTitle}}
  </div>
</template>

<script>
export default {
  name: 'myhead',
　
 //如果你想监听该属性的状态是否改变，你可以这样监听
 watch: {
     '$store.state.footTitle'(val) {
          console.log('底部导航切换了呦')
       }
   }
}
</script>

 

切不可这样，因为这样，组件显示的数据永远是你在store里的初始值，是不会更新的其它组件的视图里的，即使其它组件打印此属性的时候，已经是变化了的。但是不会触发其组件的视图更新

<template>
  <div class="myhead">
    {{title}}
  </div>
</template>

<script>
  export default {
    name: 'myhead',
    data () {
      return {
        title:this.$store.state.footTitle//切换底部导航的时候。this.title是变化的，但是对应上边的视图却不会更新
      }
    }
  }
</script>

 

效果图