npm install --save vuex
什么是vuex？
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。
简单说：vuex就是一个状态管理容器，说白了就是将数据单独存放出去。
4.2 state（全局仓库）
什么是“状态管理模式”？
每个Vuex应用的核心就是store（仓库）。store就是一个容器，它包含着你项目中大部分的状态 (state)。
Vuex 和单纯的全局对象有以下两点不同：
Vuex的状态存储是响应式的。当 Vue 组件从 store 中读取状态的时候，若 store 中的状态发生变化，那么相应的组件也会相应地得到高效更新变化。
你不能直接改变store中的状态。改变store中的状态的唯一途径就是通过commit提交mutation。这样使得我们可以方便地跟踪每一个状态的变化，从而让我们能够实现一些工具帮助我们更好地了解我们的应用。
在main.js创建一个全局仓库（store），让我们从一个简单的Vue计数器开始：
import Vue from 'vue';
import Vuex from 'vuex'; //引入Vuex包
import App from './App.vue';
Vue.use(Vuex); //将vuex安装到vue中
//创建一个仓库，并且存放一些全局数据（存放四大天王选项）
const store = new Vuex.Store({
state : {
a : 100
}
})
new Vue({
el : "#app",
store, //将store注入到全局中
render : (h)=> h(App)
})
Vuex通过store选项，提供了一种机制将状态从根组件“注入”到每一个子组件中（需要调用Vue.use(Vuex)）
通过在根实例中注册store选项，该store实例会注入到根组件下的所有子组件中，并且组件能通过this.$store访问。
在App.vue中的生命周期中输出this，能看到vue实例化对象的全局有$store这个对象
<template>
<div>
<h1>全局仓库state对象的a值：{{$store.state.a}}</h1>
</div>
</template>
<script>
export default {
created(){
console.log(this)
console.log(this.$store.state.a)
}
}
</script>
之前做的日历组件将数据放到了App.vue最大父组件上，并且还有:year、:month、：setYear、:setMonth等一系列的参数传递操作。
但是Vuex就是将数据放到了全局store中，注意：
不管项目有多大，store只有一个
只要配置正确，组件内部可以使用$store即可访问store的全局数据
改变 store 中的状态（数据）的唯一途径就是通过commit()函数提交 mutation。
以下的描述来自于官方：https://vuex.vuejs.org/zh/guide/
再次强调，我们通过提交 mutation 的方式，而非直接改变 store.state.a，是因为我们想要更明确地追踪到状态的变化。这个简单的约定能够让你的意图更加明显，这样你在阅读代码的时候能更容易地解读应用内部的状态改变。此外，这样也让我们有机会去实现一些能记录每次状态改变，保存状态快照的调试工具。有了它，我们甚至可以实现如时间穿梭般的调试体验。