Vue状态管理大揭秘：Prop和Event VS Vuex，哪个才是你的菜？

搞定Vue项目跟齿轮轴承配合默契一样，今天就说说几种常见的Vue状态管理法子。哪种最适合你现在用？

一、Prop和Event（父子组件通信）

咱们在Vue里传消息，全指望Prop和Event这俩哥们。Prop就是让爹把料丢给儿子的利器；反过来，儿子要是有事要说，就用$emit给爹发信号即可，好比照相，人人都会。

实战时，咱们用v-bind就能把爹地组件里的东西传到小子组件里去。比如说，可以让他们俩的属性串起来，那小子就能拿到个宝藏了。反之，小子还能用$emit发信号，爹地只要安心等着收信号再处理就好了。这样一来，交互就变得简单多了！

这招儿挺好用的，特别适合传送些小信息时用。比如我们之前做过的那个电商购物车APP，只需要把商品信息通过Props传给购物车那部分，再简单地用一下Event就能随时更新商品数量顺便提醒客户呀。

二、Vuex（全局状态管理）

vuex就像个人工智能，主要解决组件之间换状态的问题。它可以把每个组件的状态收集在一起，用mutation和action来改变或获取状态信息。如果你的项目很复杂或者要共享很多状态，这个小帮手绝对是种福音！

用了Vuex这个利器，什么复杂的APP也不怕动态状态变化！就像个大仓库，存取信息轻松搞定；又像个技术大神，数据变化立即实现；更像个快递员，瞬间将变更传达到位，新数据立马送达眼前。随便瞅瞅界面的小动静，或者手轻轻一碰，就能感受到哪里不一样！

在咱们的电子商务APP中加入了Vuex以后，你就会发现登入和加商品超简单的！只要一登录，提交mutations的话更新马上就完成了，其他页面也都跟着变。

  


import ChildComponent from './ChildComponent.vue'
export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      message: 'Hello Vue!'
    }
  },
  methods: {
    handleNotify(newValue) {
      console.log(newValue)
    }
  }
}

三、Provide和Inject（跨级组件通信）

哈喽，赶快来学学Vue里的”Provide”和”Inject”！这个小技巧就像是咱们老爸教的那点儿“秘密武器”，传信儿就像走亲戚一样亲切。它们可能有点土气，但能帮咱们爸和大家亲密无间，即使再远的距离也不能抵挡我们家团聚的感情

想让组件之间互通有无？so easy！只需要用Provide和Inject这两个家伙就行了。爸爸组件提供数据，孩子组件直接照搬不误～

搞定帖子和评论排行的关键就俩招儿：“给”和“扔进去”！

四、Event Bus（事件总线）

  

    
{{ message }}
    Notify
  


export default {
  props: {
    message: String
  },
  methods: {
    handleClick() {
      this.$emit('notify', 'Message from ChildComponent')
    }
  }
}

哈喽，咱们先不谈状态管理了，这次让我给大家说说Vue的一个超好用功能——Event Bus。不管你们俩之间什么关系，它都能帮你搞定两个组件之间的互动！

使用event bus，你只需要新建一个Vue实例当信使，再通过$on和$emit传消息即可。不管你在哪儿或者是你的组件之间有没有关联，都能像朋友间聊天一样轻松搞定！

来瞅瞅这里，这就是我们常用的那个新闻APP！它使用了Event Bus这个神器来传消息，你可以随时随地留言评论。像你在看新闻的时候，突然想聊聊感想啥的，那就赶紧点击评论按键咯。这样，你的看法就能和大家分享，或许还有人马上回应你！

五、Composition API（组合式API）

哇，Vue 3.0的新功能叫做Composition API，搞编码就省事儿多了！嵌套在那么多选项中的代码，现在可以放进’setup’函数了。爽翻天~

使用composite API，别忘了给模板传递反应式变数和计算属性。这样写出来的代码整洁易懂，以后改动或者分割也方便多！

这个音乐作曲API真不错，要是你想要做可以重复用的控件，不管你在哪张网页上都能用！

六、MobX（响应式状态管理库）

别老是用Vue那儿的Vuex，试试看在网上超火的MobX第三方库吧!它可是相当给力的响应式状态管理器。你就放心，这个库能自动更新相关数据，识别依赖关系就更不在话下了，你还用担心什么状态管理呢?

// store.js
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
  state: {
    message: 'Hello Vuex!'
  },
  mutations: {
    setMessage(state, payload) {
      state.message = payload
    }
  },
  actions: {
    updateMessage({ commit }, payload) {
      commit('setMessage', payload)
    }
  },
})
// parent.vue

  

    
{{ $store.state.message }}
    Update Message
  


import { mapActions } from 'vuex'
export default {
  methods: {
    ...mapActions(['updateMessage']),    
  }
}

// child.vue

  

    
{{ $store.state.message }}
    Update Message
  


import { mapActions } from 'vuex'
export default {
  methods: {
    ...mapActions(['updateMessage']),    
  }
}

快来体验MobX这个超赞的神器，只需要设置个Observable属性，不用再搞mutations和actions的麻烦事儿。而且它还会自动处理这些关联，UI也可以实时更新，方便快捷！

好，大家都知道的那个你我常聊的微信呀微博，用Mobile X就可以搞定用户的信息和动态！无论你想怎么查看怎么刷新，界面消息都会时刻变化滴

七、比较各种状态管理方案

选啥工具得看你这活儿多大多难，再瞅瞅队里哪个厉害点儿的行不行呗。就酱紫！

– Prop和Event：适合简单场景下父子组件通信。

– Vuex：适合大型项目或需要全局共享状态。

-一步到位，心想事成：轻松搞定级联嵌套的数据传输。

– Event Bus：轻量灵活但需谨慎使用。

我最近研究了Vue 3.0功能强大的Composition API，感觉超顺手！比如说编程，用起来就像变魔术，各种代码都能巧妙地结合在一起。

– MobX：第三方库选择，在响应式处理上具有优势。

// provider.vue

  

    
      
    
  

  

export default {
  data() {
    return {
      message: 'Hello Provide and Inject!'
    }
  }
}

// child.vue

  

    
{{ message }}
  

  

export default {
  inject: ['message']
}

别磨蹭了，赶紧找到适合自己编程节奏的方式。这样既能提升效率又有趣味性，写出的代码也赏心悦目，修改起来就轻松多！

看完这篇文章知道哪个Vue项目状态管理工具适合你了吗？用着还行吗？还是遇到问题了？分享一下。