Vuex 是 Vue 的状态管理工具，专门用于集中管理多个组件的共享状态。简单概括，它就像一个“中央情报局”，帮你搞定各种组件的“数据战争”。当多个组件需要共享或修改同一状态时，Vuex 就是你最好的选择。

问题来了：如果不用 Vuex，你会遇到什么麻烦？设想一下，你有两个组件 A 和 B，它们都需要修改同一个数据。你会怎么做？在 A 里写个方法，B 也写个方法，最后发现数据不一致，调试到怀疑人生。而 Vuex 通过集中管理状态，让这些组件都能“和平共处”。

解决方案： Vuex 的核心是“store”，它包含了应用的状态（state）。你可以通过 commit 提交一个 mutation 来修改状态，或者通过 dispatch 触发一个 action 进行异步操作。比如，你的计数器组件可以通过 this.$store.commit('JIA', n) 来增加计数，而不用在每个组件里写重复的逻辑。

思维拓展： Vuex 虽然强大，但并不是所有项目都需要它。小型项目中，过度使用 Vuex 可能增加复杂度。所以，聪明的开发者会根据项目规模灵活选择工具。记住，工具是为人服务的，别让它变成你的负担。

5. vuex

5.1 理解vuex

5.1.1 vuex是什么

1. 概念：专门在Vue中实现集中式状态（数据）管理的一个Vue插件，对vue应用中多个组件的共享状态进行集中式的管理（读/写），也是一种组件间通信的方式，且适用于任意组件间通信。
2. Github 地址: https://github.com/vuejs/vuex

5.1.2 什么时候使用 Vuex

1. 多个组件依赖于同一状态
2. 来自不同组件的行为需要变更同一状态

5.1.3 案例

效果：

代码：
Count.vue组件

<template><div><h1>当前求和为：{{ $store.state.sum }}</h1><select v-model="n"><option :value="1">1</option><option :value="2">2</option><option :value="3">3</option></select><button @click="incremnt">+</button><button @click="decrement">-</button><button @click="incrementOdd">当前和为奇数再加</button><button @click="incrementWait">等一等再加</button></div>
</template><script>export default {name: 'Count',data(){return {n: 1, //用户选择的数据}},methods: {incremnt(){this.$store.commit('JIA', this.n)},decrement(){this.$store.commit('JIAN', this.n)},incrementOdd(){this.$store.dispatch('jiaOdd', this.n)},incrementWait(){this.$store.dispatch('jiaWait', this.n)},},mounted(){console.log('Count', this);}}
</script><style scoped>button {margin-left: 5px;}
</style>

store/index.js