快速了解Vuex

提要：提起react就会想起其应用最普遍的redux状态管理工具，vue中的官方推荐的状态管理工具就是Vuex。

看到同事在鼓捣Vuex的东西，前面项目完成后也没有好好总结一下Vuex的知识，全部就再回头看看，温故知新。

什么是Vuex？

根据Vuex文档中的描述，Vuex是使用于Vue.js应用的状态管理库，为应用中的全部组件提供集中式的状态存储与操做，保证了全部状态以可预测的方式进行修改。

这个状态自管理应用包含是三个部分：

1. state: 驱动应用的数据源；
2. view：以声明方式将state映射到视图；
3. actions：相应view上的用户输入致使的状态变化。

如下是一个表示“单项数据流”理念的极简示意： 

 

可是，当咱们遇到多个组件共享状态时，单向数据流的简洁性就很容易被迫害：

多个视图依赖于同一状态。 来自不一样视图的行为须要变动同一种状态。

对于问题一，传参的方法对于多层嵌套的组件就会很是繁琐，而且对于兄弟组件建的状态传递无能为力。对于问题二，咱们常常会采用父子组件直接引用或者时间来变动和同步状态的多份拷贝。以上的这些模式很是脆弱，一般会致使没法代码没法维护。

所以，咱们能够把组件的状态共享抽取出来，以一个全局单例模式管理。在这种模式下，咱们的组件树构成一个巨大的“视图”，无论在树的那个位置，任何组件都可以获取状态或者出发行为。

另外，经过定义和隔离状态管理中心的各类概念并强制遵循必定的规则，咱们的代码就会变得结构化且易维护。

这就是Vuex背后的基本思想，借鉴了Flux、Redux。全部之前用过Redux后，学习Vuex也没有比较吃力的状况。

 

 

什么状况下应该用Vuex

若是不须要开发大型单页应用，使用Vuex多是繁琐冗余的。若是你的应用足够简单，最好不要使用Vuex。可是，若是须要构件一个大型单页应用，就应该考虑使用组件外部的状态管理工具，对于vue应用Vuex就成为天然而然的选择。

Vuex中的几个核心概念

学习一个知识点就须要掌握知识点中涉及到的一些核心概念，弄懂了概念，学习起来就可以如鱼得水。

State

单一状态数

Vuex使用单一状态树，就是用一个对象就包含了所有的应用的层级状态。因此它便做为一个【惟一数据源（SSOT）】而存在。这也意味着，每一个应用将牢牢包含一个store实例。但一状态树让咱们可以直接定位任一特定的状态片断，在调试的过程当中也可以轻易地取得整个当前应用状态的快照。

在Vue组件中获取Vuex状态

因为Vuex的状态存储是响应式的，从store实例中读取状态最贱单的方式就是在计算属性中返回某个状态：

// 建立一个 Counter 组件
const Counter = {
  template: `<div>{{ count }}</div>`,
  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: `
    <div class="app">
      <counter></counter>
    </div>
  `
})

经过在根事例中注册store选项，该store实例会注入到根组件下的全部子组件中，且子组件可以经过this.$store访问到。

const Counter = {
  template: `<div>{{ count }}</div>`,
  computed: {
    count () {
      return this.$store.state.count
    }
  }
}

mapState辅助函数

当一个组件须要获取多个状态时，将这些状态都声明为计算属性会有些重复和冗余。为了解决这个问题，咱们可使用mapState辅助函数帮助咱们生成计算属性：

//在单独构建的版本中辅助函数为Vuex.mapState
import { mapState } from 'vuex'

export default {
    //...
    computed: mapState({
        //箭头函数可以使代码更简练
        count: state => state.count,
        //传字符串'count'等同于`stete => state.count`
        countAlias: 'count',
        //为了可以使用`this`获取局部状态，必须使用常规函数
        countPlusLocalState(state) {
            return state.count + this.localCount
        }
    })
}

当映射的计算属性的名称与state的子节点名称相同时，咱们也能够给mapState传入一个字符串数组。

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

对象展开运算符

mapState函数返回的是一个对象。咱们如何将它与局部计算属性混合使用呢？一般，咱们须要使用一个工具函数来将多个对象合并为一个，以使咱们能够将最终对象传给computed属性。可是自从有了对象展开运算符，如今咱们能够极大地简化写法：

computed: {
    localComputed (){    },
    //使用对象展开运算符将此对象混入到外部对象中
    ...mapState({
        //...
    })
}

组件仍然保有局部状态

使用Vuex并不意味着须要将全部的状态放入Vuex。虽然将全部的状态放到Vuex会使状态更显式和易调试，可是会是代码变得冗长和不直观。若是有些状态严格属于单个组件，最好是做为组件的局部状。应该能做为局部状态的就保留局部状态。

Getters

有时候咱们须要从store中的state中派生出一些状态，例如对列表尽心过滤并计数：

computed: {
    doneTodosCount () {
        return this.$store.state.todos.filter(todo => todo.done.length)
    }
}

若是有多个组件须要用到此属性，咱们要么复制这个函数，或者抽取到一个共享函数而后在多出导入它——不管哪一种方式都不是很理想。

Vuex容许咱们在store中定义“getters”（能够认为是store的计算属性）。Getters接受state做为其第一个参数：

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)
        }
    }
})

Getters会暴露出store.getters对象：

store.getters.doneTodos //-> [{id: 1, text: '...', done: true}]

Getters也能够接受其余getters做为第二个参数：

getters: {
    doneTodosCount: (state, getters)=> {
        return getters.doneTodos.length;
    }
}

store.getters.doneTodosCount //-> 1

咱们能够很容易地在任何组件中使用它：

computed: {
    doneTodosCount(){
        return this.$store.getters.doneTodosCount;
    }
}

mapGetters辅助函数

mapGetters辅助函数仅仅是将store中的getters映射到局部计算属性：

import {mapGetters} from 'vuex'

export default {
    computed: {
        // 使用对象展开运算符将 getters 混入 computed 对象中
        ...mapGetters([
            'doneTodosCount',
            'anotherGetter'
        ])
    }
}

若是你想讲一个getter属性另去一个名字，使用对象形式：

mapGetters({
    // 映射 this.doneCount 为 store.getters.doneTodosCount
    doneCount: 'doneTodosCount'
})

未完

以上内容是看到同事在用mapGetters这个方法，忽然想到前面作的Vue项目中并无去尝试使用一些辅助函数去减小代码量，因而乎回过头来再看看Vuex的官网，把内容敲一遍，加深理解。后面项目中若是用到vue，就更加深刻的研究一下Vue以及Vuex的一些彩蛋内容。