Vuex学习笔记_state =>

使用的原因

多组件共用同一个状态时，确保单向数据流不被破坏。

原理

把组件的共享状态抽取出来，以一个全局单例模式管理

Store

store包含着应用中大部分的状态 (state)

1、Vuex 的状态存储是响应式的。当 Vue 组件从 store 中读取状态的时候，若 store 中的状态发生变化，
那么相应的组件也会相应地得到高效更新。
2、不可以直接改变 store 中的状态。改变 store 中的状态的唯一途径就是显式地提交 (commit) mutation。
这样使得我们可以方便地跟踪每一个状态的变化，从而让我们能够实现一些工具帮助我们更好地了解我们的应用。
1
2
3
4

在组件中调用 store 中的状态需要在计算属性（computed）中返回。触发变化需要在组件的 methods 中提交 mutation。

在根实例中全局注册store，就可以在任意组件中通过 this.$store.state 获取状态属性

State

mapState 辅助函数

当一个组件需要获取多个状态的时候，将这些状态都声明为计算属性会有些重复和冗余。为了解决这个问题，我们可以使用 mapState 辅助函数帮助我们生成计算属性，如果需要和局部状态响应只能使用普通函数，不可使用箭头函数否则this会获取不到vue实例：

computed: mapState({
    // 箭头函数可使代码更简练
    count: state => state.count,

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

    // 为了能够使用 `this` 获取局部状态，必须使用常规函数
    countPlusLocalState (state) {
      return state.count + this.localCount
    } 
})
1
2
3
4
5
6
7
8
9
10
11
12

当映射的计算属性的名称与 state 的子节点名称相同时，我们也可以给 mapState 传一个字符串数组：

computed: mapState([
  // 映射 this.count 为 store.state.count
  'count'        			    这里使用的是ES6的简写语法 当属性名和属性值相同是就可以只简写属性名
])
1
2
3
4

通过 …mapState()可以将多个对象合并为一个，此时函数参数为一个对象

Getter

有时候我们需要从 store 中的 state 中派生出一些状态，Vuex 允许我们在 store 中定义“getter”（可以认为是 store 的计算属性）。就像计算属性一样，getter 的返回值会根据它的依赖被缓存起来，且只有当它的依赖值发生了改变才会被重新计算，Getter 会暴露为 store.getters 对象，可以以属性的形式访问。辅助函数传参区别：参数为【】时，内部可以使用简写，参数为{}时内部不可以使用简写

1、Getter 接受 state 作为其第一个参数：

 getters: {
    doneTodos: state => {
      return state.todos.filter(todo => todo.done)
    }
 }
1
2
3
4
5

2、Getter 也可以接受其他 getter 作为第二个参数：

getters: {
  doneTodosCount: (state, getters) => {
    return getters.doneTodos.length
  }
} 
1
2
3
4
5

3、也可以通过让 getter 返回一个函数，来实现给 getter 传参。在对 store 里的数组进行查询时非常有用。

getter 在通过方法访