Vuex是一个专为Vue.js应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。
这里的”可预测”可以理解为实现特定的功能。
组件状态即组件中的数据、功能等信息，Vuex提供了操作组件状态的mutations和actions选项。
初识Vuex
1.什么是Vuex
Vuex是Vue团队提供的一套组件状态管理维护的解决方案。
Vuex作为Vue插件来使用，进一步完善了Vue基础代码功能，使Vue组件状态更加容易维护，为大型项目开发提供了强大的技术支持。
<script>
const store = new Vuex.Store({
state: {},
mutations: {}
})
var vm = new Vue({ el: '#app', store })
</script>2.Vuex的下载和安装
Vuex通常有两种安装方式，一种是直接通过<script>标签引入vuex.js文件，另一种是在npm中安装。
vuex.js单文件引用
从Vue官方网站可以获取vuex.js文件的下载
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.13/vue.js"></script>
<script src=".\vuex.js"></script>
<title>Document</title>
</head>
<body>
<div id="app">
<p>{{this.$store.state.name}}</p>
</div>
</body>
<script>
const store = new Vuex.Store({
state: {},
mutations: {}
})
var vm = new Vue({ el: '#app', store })
</script>npm导入vuex包
在使用webpack进行Vue开发时，vue和vuex都是通过npm安装的
/store/index.js
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
state: {
name: '正在使用Vuex'
}
})/src/main.js
import Vue from 'vue'
import App from './App'
import router from './router'
import Vuex from 'vuex'
import store from './store'
Vue.use(Vuex)
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
components: { App },
template: '<App/>',
store
})App.vue
<template>
<div id="app">
<p>{{ name }}</p>
<router-view />
</div>
</template>
<script>
import { mapState } from 'vuex'
export default {
name: 'App',
computed: mapState({
name: state => state.name
})
}
</script>
<style>
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>3.计数器案例
每一个Vuex应用的核心就是store(仓库)，即响应式容器，它用来定义应用中的数据以及数据处理工具。
Vuex的状态存储是响应式的，当store中数据状态发生变化，那么页面中的store数据也发生相应变化。
改变store中的状态的唯一途径就是显式地提交mutation，这样可以方便地跟踪每一个状态的变化。
<div id="app">
<button @click="increment">+</button>
<p>{{ this.$store.state.count }}</p>
<router-view />
</div>
<script>
const store = new Vuex.Store({
state: {
count: 0
},
mutations: {
increase(state) {
state.count++
}
}
})
var vm = new Vue({
el: '#app',
store,
methods: {
increment() {
this.$store.commit('increase')
}
}
})
</script>4.Vuex状态管理模式
若要理解为什么Vuex是一个状态管理模式，需要先理解Vue中的单向数据流机制。
在Vue中，组件的状态变化是通过Vue单向数据流的设计理念实现的。
!-- View -->
<template>
<div>{{ count }}</div>
</template>
<script>
new Vue({
//State
data() {
return { count: 0 }
},
//Actions
methods: {
increment() {
this.count++
}
}
})
Vue中的单向数据流主要包含以下3个部分
State:驱动应用的数据源
View：以声明方式将state映射到视图
Acitions：响应在View上的用户输入导致的状态变化
Vue的单向数据流增强了组件之间的独立性，但是存在多个组件共享状态的时候，单向数据流状态就会被破坏。
为了数据维护更加方便，需要将组件共享状态抽离出来，用全局单例模式来管理。
在这种模式下，任何组件都能获取状态或者触发行为，这就是所谓的Vuex数据状态管理。
Vuex是专门为Vue设计的状态管理库，以利用Vue的细粒度数据响应机制来进行高效的状态更新。
Vuex内部结构的工作流程关系
Actions中定义事件回调方法，通过Dispatch触发事件处理方法，例如，store.dispatch(‘事件处理方法名称’),并且Actions是异步的。
Mutations通过Commit提交，例如，store.commit(‘事件处理方法名称’),并且Mutations是同步的。
从职责上，Actions负责业务代码，而Mutations专注于修改State。
在提交Mutations时，devtools调试工具完成Mutations状态变化的跟踪。
5.什么情况下我应该使用 Vuex？
Vuex 可以帮助我们管理共享状态，并附带了更多的概念和框架。这需要对短期和长期效益进行权衡。
如果您不打算开发大型单页应用，使用 Vuex 可能是繁琐冗余的。
确实是如此——如果您的应用够简单，您最好不要使用 Vuex。一个简单的 store 模式(opens new window)就足够您所需了。
但是，如果您需要构建一个中大型单页应用，您很可能会考虑如何更好地在组件外部管理状态，Vuex 将会成为自然而然的选择。
使用Vuex统一管理的好处：
1.能够在vuex统一管理状态的好处
2.能够高效地实现组件之间的数据共享，提高开发效率
3.存储在Vuex中的数据都是响应式的，能够实时保持数据与页面的同步
6.小范围内组件共享数据的方式
父组件向子组件传值：v-bind属性绑定
子组件向父组件传值：v-on事件绑定
兄弟组件之间共享数据：EventBus
- $on 接受数据的那个组件
- $emit 发送数据的那个组件