Vuex学习笔记

一、Vue的状态管理模式

学习Vuex之前，先用一个简单计数应用为例来说明一下Vue的状态管理模式。

new Vue({

    // state

    data() {

        return {

            count: 0

        }

    },

    // view

    template: `

    <div>{{ count }}</div>

  `,

    // actions

    methods: {

        increment() {

            this.count++

        }

    }

})

这个状态管理应用包含以下几个部分

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

 

单向数据流理念的示意图

 

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

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

把组件的共同状态抽取出来，用全局单例模式管理，不管在组件树的那个位置，任何组件都能获取状态或触发行为。

 

Vuex的核心就是store。store中包含了需要在组件之间共享的状态state。

store就像一个全局对象，但和全局对象又有所不同：

1、  Vuex 的状态存储是响应式的。当 Vue 组件从 store 中读取状态的时候，若 store 中的状态发生变化，那么相应的组件也会相应地得到高效更新。

2、  你不能直接改变 store 中的状态。改变 store 中的状态的唯一途径就是显式地提交 (commit) mutation。这样使得我们可以方便地跟踪每一个状态的变化，从而让我们能够实现一些工具帮助我们更好地了解我们的应用。

 

二、核心概念

1、State

const state ，这个就是我们说的访问状态对象，它就是我们SPA（单页应用程序）中的共享值。

在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访问到。让我们更新下 Counter 的实现：

const Counter = {

    template: `<div>{{ count }}</div>`,

    computed: {

        count() {

            return this.$store.state.count

        }

    }

}

mapState辅助函数

当一个组件需要获取多个状态时候，将这些状态都声明为计算属性会有些重复和冗余。为了解决这个问题，我们可以使用 mapState 辅助函数帮助我们生成计算属性，让你少按几次键。

 

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

computed: mapState([

    // 映射 this.count 为 store.state.count

    'count'

])

 

…mapState

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

computed: {

    localComputed() { /* ... */ },

  // 使用对象展开运算符将此对象混入到外部对象中

  ...mapState({

        // ...

    })

}

 

2、Getter

getters

可以把getters看作获取State之前对state进行再编辑的操作。

Getter接受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)

        }

    }

})

 

Getter会暴露为store.getters对象：

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

 

mapGetters辅助函数

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

export default {

    // ...

    computed: {

        // 使用对象展开运算符将 getter 混入 computed 对象中

        ...mapGetters([

            'doneTodosCount',

            'anotherGetter',

            // ...

        ])

    }

}

 

3、Mutaion

mutations

更改Vuex的store中的状态唯一的方法就提交mutation。

Vuex中的mutation非常类似于事件，每个 mutation 都有一个字符串的 事件类型 (type) 和 一个 回调函数 (handler)。这个回调函数就是我们实际进行状态更改的地方，并且它会接受 state 作为第一个参数：

const store = new Vuex.Store({

    state: {

        count: 1

    },

    mutations: {

        increment(state) {

            // 变更状态

            state.count++

        }

    }

})

不能直接调用一个 mutation 的回调函数。这个选项更像是事件注册：“当触发一个类型为 increment 的 mutation 时，调用此函数。”要唤醒 mutation回调函数，你需要以相应的 type 调用 store.commit 方法：

store.commit('increment')

 

提交载荷

向store.commit传入额外的参数，即mutation的载荷。

// ...

mutations: {

    increment(state, n) {

        state.count += n

    }

}

store.commit('increment', 10)

大多数情况下，载荷是一个对象。

 

mutations: {

    increment(state, payload) {

        state.count += payload.amount

    }

}

store.commit('increment', {

    amount: 10

})

 

对象风格的提交方式

提交的另一种方法使直接使用包含type属性的对象：

store.commit({

    type: 'increment',

    amount: 10

})

整个对象作为载荷传给mutation函数，因此回调函数保持不变。

 

Mutation必须是同步函数

当mutation触发时，回调函数还没调用，devtools不知道回调函数什么时候调用，事实上任何回调函数进行的状态改变都是不可追踪的。

 

在组件中提交mutaion

可以在组件中使用 this.$store.commit('xxx') 提交 mutation，或者使用 mapMutations 辅助函数将组件中的 methods 映射为 store.commit 调用（需要在根节点注入 store）。

import { mapMutations } from 'vuex'

 

export default {

    // ...

    methods: {

        ...mapMutations([

            'increment',

// 将 `this.increment()` 映射为`this.$store.commit('increment')`

 

            // `mapMutations` 也支持载荷：

            'incrementBy' // 将 `this.incrementBy(amount)` 映射为 `this.$store.commit('incrementBy', amount)`

        ]),

        ...mapMutations({

            add: 'increment' // 将 `this.add()` 映射为 `this.$store.commit('increment')`

        })

    }

}

4、Action

actions

与mutation的基本功能一样，但不同点在于：

Action提交的是mutation而不是直接变更状态。

Action可以包含异步操作。

const store = new Vuex.Store({

    state: {

        count: 0

    },

    mutations: {

        increment(state) {

            state.count++

        }

    },

    actions: {

        increment(context) {

            context.commit('increment')

        }

    }

})

Action接收一个与store实例具有相同方法和属性的 context 对象，因此你可以调用 context.commit 提交一个 mutation，或者通过 context.state 和 context.getters 来获取 state 和 getters。

 

分发action

Action通过store.dispatch方法分发

store.dispatch('increment')

而为什么不直接分发mutation？因为mutation必须同步执行，而action内部可以执行异步操作，mutation不可以。

 

在组件中分发action

import { mapActions } from 'vuex'

 

export default {

    // ...

    methods: {

        ...mapActions([

            'increment', // 将 `this.increment()` 映射为 `this.$store.dispatch('increment')`

 

            // `mapActions` 也支持载荷：

            'incrementBy' // 将 `this.incrementBy(amount)` 映射为 `this.$store.dispatch('incrementBy', amount)`

        ]),

        ...mapActions({

            add: 'increment' // 将 `this.add()` 映射为 `this.$store.dispatch('increment')`

        })

    }

}

5、Module

modules

由于使用单一状态树，应用的所有状态会集中到一个比较大的对象。当应用变得非常复杂时，store 对象就有可能变得相当臃肿。

因此Vuex允许将store分割成模块mudule，每个模块都可以拥有自己的state、mutation、action、getter。

const moduleA = {

    state: { ... },

    mutations: { ... },

    actions: { ... },

    getters: { ... }

}

 

const moduleB = {

    state: { ... },

    mutations: { ... },

    actions: { ... }

}

 

const store = new Vuex.Store({

    modules: {

        a: moduleA,

        b: moduleB

    }

})

 

store.state.a // -> moduleA 的状态

模块的局部状态

模块内部的mutation和getter，接收的第一个参数是模块的局部状态对象，即模块内部的state。

模块内部的action，局部状态通过context.state暴露出来，根节点状态为context.rootState.

模块内部的getter，根节点状态rootState作为第三个参数暴露出来。

 

命名空间

可以通过添加 namespaced: true 的方式使其成为命名空间模块。当模块被注册后，它的所有 getter、action 及 mutation 都会自动根据模块注册的路径调整命名。例如：

const store = new Vuex.Store({

    modules: {

        account: {

            namespaced: true,

 

            // 模块内容（module assets）

            state: { ... }, // 模块内的状态已经是嵌套的了，使用 `namespaced` 属性不会对其产生影响

            getters: {

                isAdmin() { ... } // -> getters['account/isAdmin']

            },

            actions: {

                login() { ... } // -> dispatch('account/login')

            },

            mutations: {

                login() { ... } // -> commit('account/login')

            }

        }

    }

})

启用了命名空间的 getter 和 action 会收到局部化的 getter，dispatch 和 commit。换言之，你在使用模块内容（module assets）时不需要在同一模块内额外添加空间名前缀。更改 namespaced 属性后不需要修改模块内的代码。

 

在命名空间模块访问全局内容

如果需要在使用全局 state 和 getter，rootState 和 rootGetter 会作为第三和第四参数传入 getter，也会通过 context 对象的属性传入 action。

若需要在全局命名空间内分发 action 或提交 mutation，将 { root: true } 作为第三参数传给 dispatch 或 commit即可。

 

*带命名空间的绑定函数

当使用 mapState, mapGetters, mapActions 和 mapMutations 这些函数来绑定命名空间模块时，写起来可能比较繁琐，因此可以将模块的空间名称字符串作为第一个参数传递给上述函数，这样所有绑定都会自动将该模块作为上下文。于是简化为：

computed: {

  ...mapState('some/nested/module', {

        a: state => state.a,

        b: state => state.b

    })

},

methods: {

  ...mapActions('some/nested/module', [

        'foo',

        'bar'

    ])

}

这个写法是项目中使用的写法。