1.Vuex干什么用的

1.1存在的问题

多个组件共享状态时，必须实现：

• 多个视图依赖于同一状态。
• 来自不同视图的行为需要变更同一状态。

现有的方法无法解决以下问题:

• 传参的方法对于多层嵌套的组件将会非常繁琐，并且对于兄弟组件间的状态传递无能为力。
• 们经常会采用父子组件直接引用或者通过事件来变更和同步状态的多份拷贝。以前的这些模式非常脆弱，通常会导致无法维护的代码。

1.2 作用

Vuex的作用是把组件的共享状态抽取出来，以一个全局单例模式管理。Vuex 是专门为 Vue.js 设计的状态管理库，以利用 Vue.js 的细粒度数据响应机制来进行高效的状态更新。
什么情况下应该使用 Vuex：

• 不打算开发大型单页应用，使用 Vuex 可能是繁琐冗余的。应用够简单，最好不要使用 Vuex。一个简单的 store 模式就足够。
• 如果需要构建一个中大型单页应用，您很可能会考虑如何更好地在组件外部管理状态。

2.安装使用Vuex

因为Vuex 依赖 Promise，所以还需要引入es6-promise，两种使用方式：
（1）直接下载 / CDN 引用
引入Vuex：

//CDN:一直指向 NPM 上发布的最新版本
https://unpkg.com/vuex
//指定特定的版本
https://unpkg.com/vuex@2.0.0
//直接下载
<script src="/path/to/vue.js"></script>
<script src="/path/to/vuex.js"></script>

引入Promise，然后 window.Promise 会自动可用：

//CDN
<script src="https://cdn.jsdelivr.net/npm/es6-promise@4/dist/es6-promise.auto.js"></script>

（2）模块化的打包系统中使用

先安装vuex ，然后显式地通过 Vue.use()使用

//npm 安装
npm install vuex --save
//使用
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)

先安装Promise，然后引入

//npm安装
npm install es6-promise --save
//使用 Vuex 之前的一个地方引入
import 'es6-promise/auto'

3. Vuex的核心

（1）核心介绍
Vuex 应用的核心就是 store（仓库），“store”基本上就是一个容器，它包含着你的应用中大部分的状态 (state)。Vuex 和单纯的全局对象有以下两点不同：

• Vuex 的状态存储是响应式的。当 Vue 组件从 store 中读取状态的时候，若 store 中的状态发生变化，那么相应的组件也会相应地得到高效更新。
• 不能直接改变 store 中的状态 。改变 store 中的状态的唯一途径就是显式地提交 (commit) mutation。

（2）简单使用
创建一个 store仓库，创建过程提供一个初始 state 对象和一些 mutation：

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)

const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment (state) {
      state.count++
    }
  }
})

然后可以通过 store.state 来获取状态对象，以及通过 store.commit 方法触发状态变更：

store.commit('increment')
console.log(store.state.count) // -> 1

为了在 Vue 组件中访问 this.$store property，需要为 Vue 实例提供创建好的 store。Vuex 提供了一个从根组件向所有子组件，以 store 选项的方式“注入”该 store 的机制：

new Vue({
  el: '#app',
  store: store,
})

然后我们就可以在组件中使用

methods: {
  increment() {
    this.$store.commit('increment')
    console.log(this.$store.state.count)
  }
}