Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。
每一个 Vuex 应用的核心就是 store（仓库）。"store" 基本上就是一个容器，它包含着你的应用中大部分的状态(state)。Vuex 和单纯的全局对象有以下两点不同：
-
Vuex 的状态存储是响应式的。当 Vue 组件从 store 中读取状态的时候，若 store 中的状态发生变化，那么相应的组件也会相应地得到高效更新。
-
你不能直接改变 store 中的状态。改变 store 中的状态的唯一途径就是显式地提交(commit) mutations。这样使得我们可以方便地跟踪每一个状态的变化，从而让我们能够实现一些工具帮助我们更好地了解我们的应用。
npm install vuex --save
在一个模块化的打包系统中，您必须显式地通过 Vue.use() 来安装 Vuex：
import Vue from 'vue'import Vuex from 'vuex' Vue.use(Vuex)
Vuex 之后，让我们来创建一个 store。创建过程直截了当——仅需要提供一个初始 state 对象和一些 mutations：
// 如果在模块化构建系统中，请确保在开头调用了 Vue.use(Vuex)
const store = new Vuex.Store({ state: { count: 0 }, mutations: { increment (state) { state.count++ } }}) 在 Vue 组件中获得 Vuex 状态
那么我们如何在 Vue 组件中展示状态呢？由于 Vuex 的状态存储是响应式的，从 store 实例中读取状态最简单的方法就是在中返回某个状态：
// 创建一个 Counter 组件const Counter = { template: ` { { count }} `, computed: { count () { return store.state.count } }}
每当 store.state.count 变化的时候, 都会重新求取计算属性，并且触发更新相关联的 DOM。
然而，这种模式导致组件依赖的全局状态单例。在模块化的构建系统中，在每个需要使用 state 的组件中需要频繁地导入，并且在测试组件时需要模拟状态。
Vuex 通过 store 选项，提供了一种机制将状态从根组件『注入』到每一个子组件中（需调用 Vue.use(Vuex)）：
const app = new Vue({ el: '#app', // 把 store 对象提供给 “store” 选项，这可以把 store 的实例注入所有的子组件 store, components: { Counter }, template: `
通过在根实例中注册 store 选项，该 store 实例会注入到根组件下的所有子组件中，且子组件能通过 this.$store 访问到。让我们更新下 Counter 的实现：
const Counter = { template: ` { { count }} `, computed: { count () { return this.$store.state.count } }}
单一状态管理可以使用计算属性，当一个组件需要获取多个状态时候，将这些状态都声明为计算属性会有些重复和冗余。为了解决这个问题，我们可以使用 mapState 辅助函数帮助我们生成计算属性，让你少按几次键：