Vuex

一.Vuex是什么?

采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化.

new Vue({
    // state
    data() {
        return {
            count: 0
        }
    },
    // view
    template: `<div>{{ count }} </div>`,
    // actions
    methods: {
        increment () {
            this.count++;
        }
    }
})

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

但是当我们的应用遇到多个组件共享状态时,单向数据流的间接性很容易被破坏:

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

对于问题一,传参的方法对于多层嵌套的组件将会非常繁琐,并且对于兄弟组件间的状态传递无能为力.对于问题二,我们经常会采用父子组件直接引用或者通过事件来变更和同步状态的多份拷贝.以上这些模式非常脆弱,导致无法维护代码. 因此,将组件的共享状态抽取出来,以一个全局单例模式管理.在这种模式下,我们的组件树构成了一个巨大的“视图”,不管在树的那个位置,任何组件都能获取状态或者触发行为.

通过定义和隔离状态管理中的各种概念并通过强制规则维持视图和状态间的独立性,我们的代码将会变得更结构化且易维护.与其他模式不同的是,vuex是专门为vue.js设计的状态管理库,以利用vue.js的细粒度数据响应机制来进行高效的状态更新.

二.使用场景

• 中大型单页应用
• 简单页面使用store模式

// store模式
var store = {
  debug: true,
  state: {
      message: 'Hello'
  },
  setMessageAction (newValue) {
      if(this.debug) console.log(newValue);
      this.state.message = newValue;
  },
  clearMessageAction () {
      if(this.debug) console.log('clearMessageAction');
      this.state.message = '';
  }
}

⚠️ 所有store中state的改变,都放置在store自身的action中去管理,这种集中式状态管理能够被更容易地理解能那种类的mutation将会发生,以及它们是如何被触发的.不能在action中替换原始的状态对象,组件和store需要引用同一个共享对象,mutation才能够被观察. 组件不允许直接修改属于store实例的state,而应执行action来分发(dispatch)事件通知store去改变,最终达成了Flux架构.这样约定的好处是,我们能够记录所有store中发生的state改变,同时实现能做到记录变更(mutation),保存状态快照,历史回滚/时光旅行.

三.核心概念

1.vuex应用的核心

vuex应用的核心是store,相当于一个容器,包含着应用中大部分的状态.

2.和单纯的全局对象的区别

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

3.简单的Store

const store = new Vuex.Store({
    state: {
        count: 0
    },
    mutations: {
        increment (state) {
            state.count++;
        }
    }
})

通过store.state来获取状态对象,通过store.commit方法触发状态变更.(这样可以更明确的追踪到状态的变化)

store.commit('increment');
console.log(store.state.count);

store中的状态是响应式的(因为vuex new了一个Vue对象来实现数据的“响应式化”),子组件中调用store中的状态只需要在计算属性中返回即可,触发变化是在组件的methods中提交mutation.

4.State

单一状态树

用一个对象包含全部的应用层级状态.作为唯一数据源而存在,这也意味着,每个应用将仅仅包含一个store实例.单一状态树让我们 能够直接定位任一特定的状态片段,在调试的过程中也能轻易地取得整个当前应用状态的快照.

单状态树和模块化并不冲突,存储在Vuex中的数据和Vue实例中的data遵循相同的规则,例如状态对象必须是纯粹的.

在Vue组件中获得Vuex状态

由于Vuex的状态存储是响应式的,从store实例中读取状态最简单的方法是在计算属性中返回某个状态.

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

然鹅,这种模式导致组件依耐全局状态单例.在组件化的构建系统中,在每个需要使用state的组件中需要频繁地导入,并且在测试组件时需要模拟状态.

Vuex通过store选项,提供了一种机制将状态从根组件"注入"到每一个子组件中(Vue.use(Vuex))

const app = new Vue({
    el: '#app',
    store
})

通过在根实例中注册store选项,该store实例会注入到根组件下的所有子组件中,且子组件能通过this.$state访问到.

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

mapState辅助函数

当一个组件需要获取多个状态时,将这些状态都声明为计算属性会重复和冗余.此时使用mapState辅助函数生成计算属性.

import { mapState } from 'vuex';

export default {
    computed: mapState({
        count: state => state.count,
        countAlias: 'count',
        countPlusLocalState (state) {
            return state.count + this.localCount;
        }
    })
}

当映射的计算属性的名称与state的子节点名称相同时,给mapState传入一个字符串数组.

computed: mapState({
    'count'
})

对象展开运算符

因为mapState函数返回的是一个对象,使用扩展运算符将此对象混入到外部对象中.

computed: {
    localComputed () {
        ...mapState({
        //...
        )
    }
}

组件仍然保有局部状态

如果有些状态严格属于单个组件,最好还是作为组件的局部状态.

5.Getter

有时我们需要从store中的state中派生出一些状态,例如对列表进行过滤并计数.

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

Vuex允许我们在store中定义'getter'(可以认为是store的计算属性).就像计算属性一样,getter的返回值会根据它的依耐被缓存起来,且只有当它的依耐值发生改变才会被重新计算.

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

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

通过属性访问

Getter会暴露为store.getters对象,你可以以属性的形式访问这些值.

store.getters.doneTodos

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

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

⚠ ️gette在通过属性访问时是作为vue的响应式系统的一部分缓存其中的.

通过方法访问

可以通过让getter返回一个函数,来实现给getter传参.

getters: {
    getTodoById: (state) => (id) => {
        return state.todos.find(todo => todo.id === id)
    }
}

store.getters.getTodoById(2)

⚠ ️getter在通过方法访问时,每次都会去进行调用,而不会缓存结果.

mapGetters辅助函数

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

import { mapGetters } from 'vuex';

export default {
    computed: {
        ...mapGetters([
            'doneTodosCount',
            'anotherGetter'
        ])
    }
}

如果想将一个getter属性另取一个名字,使用对象形式

...mapGetters({
    doneCount: 'doneTodosCount'
})

6.Mutation

更改Vuex的store中的状态的唯一方法是提交mutation.Vuex中的mutation非常类似于事件: 每个mutation都有一个字符串的时间类型和一个回调函数.这个回调函数就是我们实际进行状态更改的地方,并且它会接受state作为第一个参数.

const store = new Vuex.Store({
    state: {
        count: 1
    },
    mutations: {
        increment (state) {
            state.count++;
        }
    }
})

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

store.commit('increment');

提交载荷

可以向store.commit传入额外的参数,即mutation的载荷(payload)

mutations: {
    increment: (state, n) {
        state.count += n;
    }
}

store.commit('increment', 10);

在大多数情况下,载荷应该是一个对象,这样可以包含多个字段并且记录的mutation会更易读

mutations: {
    increment (state, payload) {
        state.count += payload.amount;
    }
}

store.commit('increment', {
    amount: 10
})

对象风格的提交方式

提交mutation的另一种方式是直接使用包含type属性的对象

store.commit({
    type: 'increment',
    amount: 10
})

当使用对象风格的提交方式,整个对象都作为载荷传给mutation函数,因此handler保持不变

mutations: {
    increment (state, payload) {
        state.count += payload.amount;
    }
}

Mutation需遵守Vue的响应规则

1.最好提前在你的store中初始化好所有所需属性.

2.当需要在对像上添加属性时,你应该使用Vue.set(obj, 'newProp', 124),或者以新对象替换老对象.

state.obj = { ...state.obj, newProp: 123 }

使用常量替代Mutation事件类型

使用常量替代mutation事件类型在各种Flux实现中是很常见的模式.这样可以使linrer之类的工具发挥作用,同时把这些常量放在单独的文件中可以让你的代码合作者对整个app包含的mutation一目了然.

// mutation-types.js
export const SOME_MUTATION = 'SOME_MUTATION';

// store.js
import Vuex from 'vuex';
import { SOME_MUTATION } from './mutation-types';

const store = new Vuex.Store({
    state: { ... },
    mutations: {
        [SOME_MUTATION] (state) {
            
        }
    }
})

Mutation必须是同步函数

why?参考下面🌰

mutations: {
    someMutation (state) {
        api.callAsyncMethod(()=>{
            state.count++;
        })
    }
}

假如我们正在debug一个app并且观察devtool中的mutation日志.每一条mutation被记录,devtools都需要捕捉到前一状态和后一状态的快照.然鹅,在上面的例子中mutation中的异步函数中的回调让这不可能完成;因为当mutation触发的时候,回调函数还没有被调用,devtools不知道什么时候回调函数实际上被调用——实质上任何在回调函数中进行的状态的改变都是不可追踪的.

在组件中提交Mutation

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

import { mapMutations } from 'vuex';

export default {
    methods: {
        ...mapMutations([
            'incremnet',
            'incrementBy'
        ]),
        ...mapMutations({
            add: 'increment'
        })
    }
}

在Vuex中mutation都是同步事务

7.Action

Action类似于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.(context对象不是store实例本身)

actions: {
    increment ({ commit }) {
        commit('increment')
    }
}

分发Action

Action通过store.dispatch方法触发

store.dispatch('increment');

mutation必须同步执行,但是Action不受约束.我们可以在action内部执行异步操作.

actions: {
    incrementAsync ({ commit }) {
        setTimeout(() =>{
            commit('increment')
        },1000)
    }
}

Actions支持同样的载荷方式和对象方式进行分发:

// 以载荷形式分发
store.dispatch('incrementAsync', {
    amout: 10
})

// 以对象形式分发
store.dispatch({
    type: 'incrementAsync',
    amount: 10
})

购物车示例,涉及到调用异步API和分发多重mutation;

actions: {
    checkout ({ commit, state }, products) {
        const saveCartItems = [...state.cart.added];
        commit(types.CHECKOUT_REQUEST)
        shop.buyProducts(products, () => commit( types.CHECKOUT_SUCCESS),
        () => commit(types.CHECKOUT_FAILURE,savedCartItems)
        )
    }
}

进行一系列的异步操作,并且通过提交mutation来记录action产生的副作用(即状态变更)

在组件中分发Action

在组件中使用this.$store.dispatch('xxx')分发action,或者使用mapActions辅助函数将组件的methods映射为store.dispatch调用(需要在根节点注入store);

import { mapActions } from 'vuex';

export default {
    methods: {
        ..mapActions([
            'increment',
            'incrementBy'
        ]),
        ...mapActions({
            add: 'increment'
        })
    }
}

组合Action

Action通常是异步的,那么如何知道action什么时候结束?如何才能组合多个action,以及处理更加复杂的异步流程?

首先,store.dispatch可以处理被触发的action的处理函数返回的Promise,并且store.dispatch仍旧返回Promise

    actions: {
        actionA ({ commit }) {
            return new Promise((resolve, reject) => {
                setTimeout(() => {
                    commit('someMutatio');
                    resolve()
                },1000)
            })
        }
    }

可以这样写:

store.dispatch('actionA').then(()=>{ //... })

在另一个action中也可以

actions: {
    actionB ({ dispatch, commit }) {
        return dispatch('actionA').then(() => {
            commit('someOtherMutation')
        })
    }
}

使用async/await

// 假设getData()和getOtherData()返回的是Promise
actions: {
    async actionA ({ commit }) {
        commit('gotData', await getData())
    },
    async actionB ({ dispatch, commit }) {
        await dispatch('actionA');
        commit('gotOtherData', await getOtherData())
    }
}

一个store.dispatch在不同模块中可以触发多个action函数.在这种情况下,只有当所有触发函数完成后,返回的Promise才会执行.

7.Module

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

Vuex允许我们将store分割成模块.每个模块拥有自己的state,mutation,action,getter甚至是嵌套的子模块--从上至下进行同样方式的分割

const moduleA = {
    state: { ... },
    mutations: { ... },
    actions: { ... },
    getters: { ... }
}

const moduleB = {
    state: { ... },
    mutations: { ... },
    actions: { ... }
}

cosnt store = new Vuex.store({
    modules: {
        a: moduleA,
        b: moduleB
    }
})

store.state.a
store.state.b

模块的局部状态

对于模块内部的mutation和getter,接收的第一个参数是模块的局部状态对象.

const moduleA = {
    state: { count: 0 },
    mutations: {
        increment (state) {
            state.count++;
        }
    },
    
    getters: {
        doubleCount (state) {
            return state.count * 2;
        }
    }
}

同样,对于模块内部的action,局部状态通过context.state暴露出来,根节点状态则为context.rootState;

const moduleA = {
    actions: {
        incrementIfOddOnRootSum ({ state, commit, rootState }) {
            if((state.count + rootState.count) % 2 == 1) {
                commit('increment')
            }
        }
    }
}

对于模块内部的getter,根节点状态会作为第三个参数暴露出来:

const moduleA = {
    getters: {
        sumWithRootCount (state, getters, rootState) {
            return state.count + rootState.count
        }
    }
}

命名空间

默认情况下,模块内部的action,mutation和getter是注册在全局命名空间的,这样使得多个模块能够对同一mutation或action作出响应.

如果希望你的模块具有更高的封装度和复用性,可以添加namespace: true的方式使其成为带命名空间的模块.当模块被注册后,它的所有getter,action及mutation都会自动根据模块注册的路径调整命名.

const store = new Vuex.Store({
    modules: {
        account: {
            namespace: true,
            state: { ... },
            getters: {
                isAdmin () { ... }
            },
            actions: {
                login () { ... }
            },
            mutations: {
                loginn () { ... }
            },
            
            //  嵌套模块
            modules: {
            // 继承父模块的命名空间
                myPage: {
                    state: { ... },
                    getters: {
                        profule () { ...
                }
            },
            // 进一步嵌套命名空间
            posts: {
                namespaced: true,
                state: { ... },
                getters: {
                    popular () { ... }
                }
            }
        }
    }
})

启用了命名空间的getter和action会收到局部化的getter,dispatch和commit.在使用模块内容时不需要在同一模块内额外添加空间名前缀.更改namespace属性后不需要修改模块内的代码.

在带命名空间的模块内访问全局内容(Global Assets)

如果你希望使用全局state和getter,rootState和rootGetters会作为第三和第四参数传入getter,也会通过context对象的属性传入action

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

modules: {
    foo: {
        namespaced: true,
        getters: {
            someGetter (state, getters, rootState, rootGetters) {
                getters.someOtherGetter;
                rootGetters.someOtherGetter
            },
            someOtherGetter: state => { ... }
        },
        
        actions: {
            someAction ({
                dispatch, commit, getters, rootGetters
            }) {
                getters.someGetter,
                rootGetters.someGetter,
                dispatch('someOtherAction');
                dispatch('someOtherAction', null, { root: true });
                
                commit('someMutation');
                commit('someMutation', null, { root: true })
            },
            someOtherAction (ctx, payload) { ... }
        }
}

在带命名空间的模块注册全局action

若需要在带命名空间的模块注册全局action,可以添加root: true,并将这个action的定义放在函数handler中

{
    actions: {
        someOtherAction ({dispatch}) {
            dispatch('someAction')
        }
    },
    modules: {
        foo: {
            namespaced: true,
            actions: {
                someAction: {
                    root: true,
                    handler (namespacedContext, payload) {
                        
                    }
                }
            }
        }
    }
}

带命名空间的绑定函数

当使用mapState, mapGetters, mapActions和mapMutations这些函数来绑定带命名空间的模块时,写起来可能比较繁琐

computed: {
    ...mapState({
        a: state => state.some.nested.module.a,
        b: state => state.some.nested.module.b
    })
},

methods: {
    ...mapActions({
        'some/nested/module/foo',
        'some/nested/module/bar'
    })
}

对于这种情况,可以将模块的命名空间名称字符串作为第一个参数传递给上述函数,这样所有绑定都会自动将该模块作为上下文.

computed: {
   ...mapState('some/nested/module', {
       a: state => state.a,
       b: state => state.b
   }) 
},

methods: {
    ...mapActions('some/neted/module', [
        'foo',
        'bar'
    ])
}

可以通过使用createNamespacedHelpers创建基于某个命名空间辅助函数.它返回一个对象,对象里有新的绑定在给定命名空间值上的组件绑定辅助函数.

import { createNamespacedHelpers } from 'vuex';

const { mapState, mapActions } = createNamespacedHelpers('some/nested/module');

export default {
    computed: {
        ...mapState({
            a: state => state.a,
            b: state => state.b
        })
    },
    
    methods: {
        ...mapActions({
            'foo',
            'bar'
        })
    }
}

模块动态注册

在store创建之后,可以使用store.registerModule方法注册模块

// 注册模块
store.registerModule('myModule', {
    // ...
})

// 注册嵌套模块 ‘nested/myModule’
store.registerModule(['nested', 'myModule'], {})

之后就可以通过store.state.myModule和store.state.nested.myModuel访问模块的状态.

模块动态注册成功使得其他vue插件可以通过在store中附加新模块的方式来使用vuex管理状态.例如,vuex-router-sync插件就是通过动态注册模块将vue-router和vuex结合在一起,实现应用的路由状态管理.

也可以使用store.unregisterModule(moduleName)来动态卸载模块.注意m不能使用此方法卸载静态模块.(即创建store时声明的模块)

保留state

在注册一个新的module时,你很有可能想保留过去的state,例如从一个服务端渲染的应用保留state.你可以通过preserveState选项将其归档: store.registerModule(‘a’, module, { preserveState: true })

当设置preserveState: true时,该模块会被注册,action,mutation和getter会被添加到store中,但是state不会.这里假设store的state已经包含了这个module的state并且你不会希望将其重写.

模块重用

有时我们可能需要创建一个模块的多个实例:

• 创建多个store,他们公用同一个模块.
• 在一个store中多次注册同一个模块.

如果我们使用一个纯对象来声明模块的状态,那么这个状态对象会通过引用被共享,导致状态对象被修改时store或模块间数据相互污染的问题.

实际上这和vue组件内的data是同样的问题.因此解决办法是使用一个函数来声明模块状态.

const MyReusableModule = {
    state () {
        return {
            foo: 'bar'
        }
    }
}

热重载

使用webpack的Hot Module Replacement API Vuex支持在开发工程中热重载mutation,module,action和getter

对于mutation和模块,需要使用store.hotUpdate()方法.

import Vue from 'Vue';
import Vuex from 'vuex';
import mutations from './mutations';
import module from './modules/a';

Vue.use(Vuex);

const state = { ... };

const store = new Vuex.Store({
    state,
    mutations,
    modules: {
        a: moduleA
    }
})

if (moduel.hot) {
    module,hot.accept(['./mutations', './modules'], () => {
        const newMutations = require('./mutations').default;
        const newModuleA = require('./modules/a').default;
        
        store.hotUpdate({
            mutations: newMutations,
            modules: {
                a: newModuleA
            }
        })
    }
}