vuex学习笔记。

每一个Vuex应用的核心就是store。store基本上就是一个容器，它包含着你的应用中大部分的状态。vuex和单纯的全局对象有以下两点不同：

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

//如果在模块化构建系统中，请确保在开头调用了Vue.use(Vuex)
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)//1

再次强调，我们通过提交mutation的方式，而非直接改变store.state.count,是因为我们想要更明确地追踪到状态的变化。这个简单的约定能够让你的意图更加明显，这样你在阅读代码的时候更容易地解读应用内部的状态改变。此外，这样也让我们有机会去实现一些能记录每次状态改变，保持状态快照的调试工具。

state

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

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

每当store.state.count变化的时候，都会重新求取计算属性，并且触发更新相关联的DOM。
然而，这种模式导致组件依赖全局状态单例。在模块化的构建系统中，在每个需要使用state的组件中需要频繁地导入，并且在测试组件时需要模拟状态。
Vuex通过store选项，提供了一种机制将状态从根组件注入到每一个子组件(需要调用Vuex.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辅助函数帮我们生成计算属性:mapState函数返回的是一个对象。

//再单独构建的版本中辅助函数为Vuex.mapState
import {mapState} from 'vuex'
export default{
    computed:mapState({
        //箭头函数可以使代码更简练
        count:state=>state.count,
        //传字符串参数‘count’等同于state=>state.count
        countAlias:'count',
        //为了能够使用this获取局部状态，必须使用常规函数
        countPlusLocalState(state){
            return state.count+this.localCount
        }
    }),
    //当映射的计算属性的名称于state的子节点名称相同时，我们也可以给mapState传一个字符串数组。
    computed:mapState([
        //映射this.count为store.state.count
        'count'
    ])
    //使用对象展开运算符与computed混合使用。
    computed:{
        loacalComputed(){},
        //使用对象展开运算符将此对象混入到外部对象中
        ...mapState({
            //...
        })
    }
} 

Getter

有时候我们需要从store中的state中派生出一些状态，例如对列表进行过滤并技数：Vuex允许我们在store中定义getter(可以认为是store的计算属性)。就像计算属性一样，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)
        }
    }
})

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

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

getter也可以接受其它getter作为第二个参数：

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

我们可以很容易地在任何组件中使用它：

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

通过方法访问：

getters:{
    //...
    getTodoById:(state)=>(id)=>{
        return state.todos.find(todo=>todo.id === id)
    }
}
store.getters.getTodoById(2)//{id:2,text:'...',done:false}

注意，getter在通过方法访问时，每次都会去进行调用，而不会缓存结果。
mapGetters辅助函数
mapGetters辅助函数仅仅是将store中的getter映射到局部计算属性：

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

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

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

Mutation

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

const store = new Vuex.Store({
    state:{
        count:1
    },
    mutations:{
        icrement(state){
            //变更状态
            state.count++
        }
    }
})

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

store.commit('increment')

提交载荷(Payload)
你可以向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的响应规则
既然Vuex的store中的状态是响应式的，那么当我们变更状态时，监视状态的Vue组件也会自动更新。这也意味着Vuex中的mutation也需要与使用Vue一样遵守一些注意事项：
1.最好提前在你的store中初始化好所有所需属性。
2.当需要在对象上添加新属性时，你应该：

使用Vue.set(obj,'newProp',123),或则以新对象替换老对象。例如：利用stage-3的对象展开运算符我们可以这样写：
state.obj = {...state.obj,newProp:123}

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

//mutation-type.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:{
        //我们可以使用ES2015风格的计算属性命名功能来使用一个常量作为函数名
        [SOME_MUTATION](state){
            //mutate state
        }
    }
})

Mutation 必须是同步函数
一条重要的原则就是要记住mutation必须是同步函数。为什么？请参考下面的例子：

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([
            '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')
      ])
    }
}

Action

Action类似于mutation，不同于：

Action提交的是mutation，而不是直接变更状态
Action可以包含任意异步操作

demo：

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和contetx.getters来获取state和getters。当我们在之后介绍到Modules时，你就知道context对象为什么不是store实例本身了。
实践中，我们会经常用到ES2015的参数解构来简化代码：

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

分发Action
Action通过store.dispath方法触发：

store.dispatch('increment')

乍一眼看上去感觉多此一举，我们直接分发mutation岂不是更方便？实际上并非如此，还记得mutation必须同步执行这个限制么？Action就不受约束，我们可以在action内部执行异步操作：

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

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

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

来看一个更加实际的购物车示例，涉及到调用异步API和分发多重mutation：

actions:{
    checkout({commit,state},products){
        //把当前购物车的物品备份起来
        const asveCarItems = [...state.cart.added]
        //发出结账请求，然后乐观的清空购物车
        commit(types.CHECKOUT_REQUEST)
        //购物API接受一个成功回调和一个失败回调
        shop.buyProducts(
            products,
            //成功操作
            ()=>commit(types.CHEKOUT_SUCCESS),
            //失败操作
            ()=>commit(types.CHECKOUT_FAILURE, savedCartItems)
        )
    }
}

在组件中分发Action
你在组件中使用this.$store.dispatch('xxx')分发action，或则使用mapActions辅助函数将组件的methods映射为store.dispatch调用（需要先在根节点注入store）

import {mapActions} from 'vuex'
export default{
    //...
    methods:{
        ...mapActions([
            'increment',//将this.incremnet映射为this.$store.dispatch('incremnet')
            //mapActions也支持载荷
            'incrementBy'//将this.incrementBy(amount)映射为this.$store.dispatch('incrementBy',amount)
        ]),
        ...mapActions({
            add:'increment'//将this.add()映射为this.$store.dispatch('increment')
        })
    }
}

组合Action
Action通常是异步的，那么如何知道action什么时候结束呢？更重要的是，我们如何才能组合多个action，以便处理更加复杂的异步流程？
首先，你需要明白store.dispatch可以处理被触发的action的处理函数返回的promise，并且store.dispatch仍旧返回Promise：

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

现在你可以：

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

在另外一个action中也可以：

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

最后，如果我们利用async/await,我们可以如下组合action：

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

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

## Moudule ##
由于使用单一状态树，应用的所有状态会集中到一个比较大的对象。当应用变得非常复杂时，store对象就可能变得相当臃肿。
为了解决以上问题，Vuex允许我们将store分割成模块。每个模块拥有自己的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的状态
store.state.b//moduleB的状态

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

const moduleA = {
    state:{count:0},
    mutations:{
        increment(state){
            //这里的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作出响应。
如果希望你的模块具有更高的封装度和复用性，你可以通过添加namespaced：true的方式使其成为带命名空间的模块。当模块被注册后，它的所有getter、action、及mutation都会自动根据模块注册路径调整命名。例如：

const store = new Vuex.Store({
    modules:{
        account:{
            namespced:true,
            //模块内容(module assets)
            state:{...},//模块内的状态已经是嵌套的了，使用namespaced属性不会对其产生影响。
            getters:{
                isAdmin(){...}//getters['account/isAdmin']
            },
            actions:{
                login(){...}//dispatch('account/login')
            },
            mutations:{
                login(){...}//commit('account/login')
            }
            //嵌套模块
            modules:{
                //继承父模块的命名空间
                myPage:{
                    state:{...},
                    getters:{
                        profile(){...}//getters['account/profile']
                    }
                },
                //进一步嵌套命名空间
                posts:{
                    namespaced:true,
                    state:{...},
                    getters:{
                        popular(){...}//getters['account/ports/popular']
                    }
                }
            }
         }
    },
})

启用了命名空间的getter和action会收到局部化的getter，dispatch和commit。换言之，你在使用模块内容时不需要在同一模块内额外添加空间名前缀。更改namespaced属性后不需要修改模块内的代码。
再带命名空间的模块内访问全局内容。
如果你希望使用全局state和getter，rootState和rootGetter会作为第三和第四参数传入getter，也会通过context对象的属性传入action。
如需要在全局命名空间内分发action或提交mutation，将{root:true}作为第三参数传给dispatch或commit即可。

modules:{    
    foo:{
        namespaced:true,
        getters:{
            //在这个模块的getter中，getters被局部化了。
            //你可以使用getter的第四个参数来调用rootGetters
            someGetter(state,getters,rootState,rootGetters){
                getters.someOtherGetter//'foo/someOtherGetter'
                rootGetters.someOtherGetter//someOtherGetter
            },
            someOtherGetter:state=>{...}
        },
        actions:{
            //在这个模块中，dispatch和commit也被局部化了
            //他们可以接受root属性以访问根dispatch或commit
            someAction({dispatch,commit,getters,rootGetters}){
                getters.someGetter//foo/someGetter
                rootGetters.someGetter//someGetter
                dispatch('someOtherAction')//foo/someOtherAction
                dispatch('someOtherAction',null,{root:true})//someOtherAction
                commit('someMutation')//foo/someMutation
                commit('someMutation',null,{root:true})//someMutation
            }
        
        },
        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){}//someAction
                }
            }
        }
    }
}

带命名空间的绑定函数
当使用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',//this['some/nested/module/foo']()
        'some/nested/module/bar' //this['some/nested/module/bar']()
    ])
}
//简化版
computed: {
  ...mapState('some/nested/module', {
    a: state => state.a,
    b: state => state.b
  })
},
methods: {
  ...mapActions('some/nested/module', [
    'foo', // -> this.foo()
    'bar' // -> this.bar()
  ])
}
//使用 createNamespacedHelpers 创建基于某个命名空间辅助函数。
import { createNamespacedHelpers } from 'vuex'
const { mapState, mapActions } = createNamespacedHelpers('some/nested/module')
export default {
  computed: {
    // 在 `some/nested/module` 中查找
    ...mapState({
      a: state => state.a,
      b: state => state.b
    })
  },
  methods: {
    // 在 `some/nested/module` 中查找
    ...mapActions([
      'foo',
      'bar'
    ])
  }
}