一.vuex是什么？什么情况下使用vuex？

引用官方文档的一句话：Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，如果您不打算开发大型单页应用，使用 Vuex 可能是繁琐冗余的。如果您需要构建是一个中大型单页应用，您很可能会考虑如何更好地在组件外部管理状态，Vuex 将会成为自然而然的选择。

下面展示一个单向数据流的图片：

2.vuex  包含几个重要的属性：

1.state 状态数据：

Vuex 使用 单一状态树 —— 是的，用一个对象就包含了全部的应用层级状态。至此它便作为一个而存在。这也意味着，每个应用将仅仅包含一个 store 实例。

示列代码如下：

// 创建一个 Counter 组件
const Counter = {
  template: `<div>{{ count }}</div>`,
  computed: {
    count () {
      return store.state.count
    }
  },

我们在这个组件里面用到了count，当我们通过store.commit('increment')时，组件里会发生rerender。

计算属性示例：

<div id="example">
  <p>my score grade: "{{ level }}"</p>
  <p>i get  "{{ score }}" point in exam</p>
  <button @click="change()">add</button>
</div>
var vm = new Vue({  
el: '#example',  
data: {score: '87'},  
computed: {level: function () {     
 return this.score > 60 ?  '合格' ：'不合格'}},  
method:{change:function(){this.score += 5}}})

3.vuex  Getter

1.作用：增强对state数据处理，例如过滤，计算。类似计算属性，具有缓存作用。

2.如何定义 Getter：

const store = new Vuex.Store({
  state: {
    todos: [
      { id: 1, text: '...', done: true },
      { id: 2, text: '...', done: false }
    ]
  },
  getters: {
    doneTodos: state => {
      return state.todos.filter(todo => todo.done)
    }
  }
})

3.如何使用：

1.
this.$store.getters.doneTodos  //基本用法

2.通过方法使用
//让 getter 返回一个函数，来实现给 getter 传参
getters: {
  // ...
  getTodoById: (state) => (id) => {
    return state.todos.find(todo => todo.id === id)
  }
}
 
使用
  this.$store.getters.getTodoById(1)

4.mapGetters 辅助函数

mapGetters 辅助函数仅仅是将 store 中的 getter 映射到局部计算属性：
 
var mapGetters = Vuex.mapGetters;
 
  computed: {
  // 使用对象展开运算符将 getter 混入 computed 对象中
    ...mapGetters([
      'doneTodosCount',
      'anotherGetter',
      // ...
    ])
  }