Vuex概述

Vuex是为Vue应用程序开发的状态管理模式。这个状态自管理应用包含以下几个部分：

• state，驱动应用的数据源；
• view，以声明方式将state映射到视图；
• actions，响应在view上的用户输入导致的状态变化。
• 

但是，当我们的应用遇到多个组件共享状态时，单向数据流的简洁性很容易被破坏：

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

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

因此，我们为什么不把组件的共享状态抽取出来，以一个全局单例模式管理呢？在这种模式下，我们的组件树构成了一个巨大的“视图”，不管在树的哪个位置，任何组件都能获取状态或者触发行为！

个人理解：状态是核心是数据源，数据驱动视图是vue的核心思想，当发生视图的交互时，会触发状态变化，来更新视图。但是不同于双向绑定，有时候我们的状态变化是无法自动通知视图发生变化的，需要设置相关的代码来实现这一功能。

正如用户登录与为登录。登录之后，需要通知一些组件发生变化，vuex的思想就是既然组件是个组件树，那么状态也可以是个状态树，任何组件发生变化，可以向整个组件树通报，所有依赖这个state的视图会自动更新。

再来回味下下面这句话
它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。

由于 store 中的状态是响应式的，在组件中调用 store 中的状态简单到仅需要在计算属性中返回即可。触发变化也仅仅是在组件的 methods 中提交 mutations。最基本的 Vuex 记数应用

相关概念

state

单一状态源，通过计算属性获取全局状态信息，但是这样会违反模块原则，也不利于调试，所以可以在new Vue()根实例时，注册store选项，来将状态注册到各个组件之中，相当于copy吧。因此使用方式如下：

const app = new Vue({
  el: '#app',
  // 把 store 对象提供给 “store” 选项，这可以把 store 的实例注入所有的子组件
  store,
  components: { Counter },
  template: `
    <div class="app">
      <counter></counter>
    </div>
  `
})
const Counter = {
  template: `<div>{{ count }}</div>`,
  computed: {
    count () {
      return this.$store.state.count   //获取状态数据
    }
  }
}

这就需要将每个需要使用的状态转换成计算属性，为此vuex提供了一个辅助函数帮助我们生成计算属性。

computed: mapState([
  // 映射 this.count 为 store.state.count
  'count'
])

// 在单独构建的版本中辅助函数为 Vuex.mapState
// 当需要在别的计算属性中使用该计算属性时，可以使用这种方式
import { mapState } from 'vuex'
export default {
  // ...
  computed: mapState({
    // 箭头函数可使代码更简练
    count: state => state.count,

    // 传字符串参数 'count' 等同于 `state => state.count`
    countAlias: 'count',

    // 为了能够使用 `this` 获取局部状态，必须使用常规函数
    countPlusLocalState (state) {
      return state.count + this.localCount
    }
  })
}

使用对象展开运算符

computed: {
  localComputed () { /* ... */ },
  // 使用对象展开运算符将此对象混入到外部对象中
  ...mapState({
    // ...  就是把这个对象一些属性弄到computed对象内，作为它的属性
  })
}

组件仍然具有局部状态，使用 Vuex 并不意味着你需要将所有的状态放入 Vuex。虽然将所有的状态放到 Vuex 会使状态变化更显式和易调试，但也会使代码变得冗长和不直观。如果有些状态严格属于单个组件，最好还是作为组件的局部状态。你应该根据你的应用开发需要进行权衡和确定。