vuex梳理

### store

1. Vue 组件中获得 Vuex 状态

```js

//方式一 全局引入单例类

// 创建一个 Counter 组件

const Counter = {

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

  computed: {

    count () {

      return store.state.count 

    }

  }

}

// Vue.use(Vuex)

const app = new Vue({

  el: '#app',

  // 把 store 对象提供给 “store” 选项，这可以把 store 的实例注入所有的子组件

  store,

  components: { Counter },

  template: `

    <div class="app">

      <counter></counter>

    </div>

  `

})

组件中实现：

const Counter = {

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

  computed: {

    count () {

      return this.$store.state.count

    }

  }

}

```

2. mapState 辅助函数

> 为了解决声明N多计算属性冗余

```js

// 在单独构建的版本中辅助函数为 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 传一个字符串数组。

```js

computed: mapState([

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

  'count'

])

```

3.对象展开运算符

> 我们如何将它与局部计算属性混合使用呢？通常，我们需要使用一个工具函数将多个对象合并为一个，以使我们可以将最终对象传给 computed 属性。

```js

// 通过对象展开运算符简化写法

computed: {

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

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

  ...mapState({

    // ...

  })

}

```

### Getter

1. getter引入

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

```js

computed: {

  doneTodosCount () {

    return this.$store.state.todos.filter(todo => todo.done).length

  }

}

```

>如果有多个组件需要用到此属性，我们要么复制这个函数，或者抽取到一个共享函数然后在多处导入它——无论哪种方式都不是很理想。

>Vuex 允许我们在 store 中定义“getter”（可以认为是 store 的计算属性）。就像计算属性一样，getter 的返回值会根据它的依赖被缓存起来，且只有当它的依赖值发生了改变才会被重新计算。

```js

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)

    }

  }

})

```

2. 通过属性访问

注意，getter 在通过属性访问时是作为 Vue 的响应式系统的一部分缓存其中的。

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

```js

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

```

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

```js

getters: {

  // ...

  doneTodosCount: (state, getters) => {

    return getters.doneTodos.length

  }

}

// 获取

store.getters.doneTodosCount // -> 1

// 组件中使用

computed: {

  doneTodosCount () {

    return this.$store.getters.doneTodosCount

  }

}

```

3. 通过方法访问

注意，getter 在通过方法访问时，每次都会去进行调用，而不会缓存结果。

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

```js

getters: {

  // ...

  getTodoById: (state) => (id) => {

    return state.todos.find(todo => todo.id === id)

  }

}

store.getters.getTodoById(2) // -> { id: 2, text: '...', done: false }

```

4. mapGetters 辅助函数

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

```js

import { mapGetters } from 'vuex'

export default {

  // ...

  computed: {

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

    ...mapGetters([

      'doneTodosCount',

      'anotherGetter',

      // ...

    ])

  }

}

```

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

```js

mapGetters({

  // 把 `this.doneCount` 映射为 `this.$store.getters.doneTodosCount`

  doneCount: 'doneTodosCount'

})

```

### Mutation

1. 事件定义

> 更改 Vuex 的 store 中的状态的唯一方法是提交 mutation

Vuex 中的 mutation 非常类似于事件：每个 mutation 都有一个字符串的 事件类型 (type) 和 一个 回调函数 (handler)。

```js

const store = new Vuex.Store({

  state: {

    count: 1

  },

  mutations: {

    increment (state) {

      // 变更状态

      state.count++

    }

  }

})

// 调用

store.commit('increment')

```

2. 提交载荷（Payload）（传递参数）

```js

mutations: {

  increment (state, n) {

    state.count += n

  }

}

store.commit('increment', 10)

```

3.对象风格的提交方式

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

```js

store.commit({

  type: 'increment',

  amount: 10

})

// store 中

mutations: {

  increment (state, payload) {

    state.count += payload.amount

  }

}

```

4. Mutation 需遵守 Vue 的响应规则

>

既然 Vuex 的 store 中的状态是响应式的，那么当我们变更状态时，监视状态的 Vue 组件也会自动更新。这也意味着 Vuex 中的 mutation 也需要与使用 Vue 一样遵守一些注意事项：

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

- 当需要在对象上添加新属性时，你应该

- [x]  使用 Vue.set(obj, 'newProp', 123), 或者

- [x]  以新对象替换老对象

```js

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

```

5.使用常量替代 Mutation 事件类型

```js

// mutation-types.js

export const SOME_MUTATION = 'SOME_MUTATION'

```

```js

// 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

    }

  }

})

```

6.  Mutation 必须是同步函数

>  一条重要的原则就是要记住 mutation 必须是同步函数

```js

mutations: {

  someMutation (state) {

    api.callAsyncMethod(() => {

      state.count++

    })

  }

}

```

7.  在组件中提交 Mutation

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

```js

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

1.

Action 类似于 mutation，不同在于：

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

- Action 可以包含任意异步操作

- Action 函数接受一个与 store 实例具有相同方法和属性的 context 对象

```js

const store = new Vuex.Store({

  state: {

    count: 0

  },

  mutations: {

    increment (state) {

      state.count++

    }

  },

  actions: {

    increment (context) {

      context.commit('increment')

    }

  }

})

// 通过解构简化

actions: {

  increment ({ commit }) {

    commit('increment')

  }

}

```

2. 分发 Action

```js

store.dispatch('increment')

```

异步操作

```js

actions: {

  incrementAsync ({ commit }) {

    setTimeout(() => {

      commit('increment')

    }, 1000)

  }

}

// 以载荷形式分发

store.dispatch('incrementAsync', {

  amount: 10

})

// 以对象形式分发

store.dispatch({

  type: 'incrementAsync',

  amount: 10

})

```

3.实际的购物车示例，涉及到调用异步 API 和分发多重 mutation：

```js

actions: {

  checkout ({ commit, state }, products) {

    // 把当前购物车的物品备份起来

    const savedCartItems = [...state.cart.added]

    // 发出结账请求，然后乐观地清空购物车

    commit(types.CHECKOUT_REQUEST)

    // 购物 API 接受一个成功回调和一个失败回调

    shop.buyProducts(

      products,

      // 成功操作

      () => commit(types.CHECKOUT_SUCCESS),

      // 失败操作

      () => commit(types.CHECKOUT_FAILURE, savedCartItems)

    )

  }

}

```

4.在组件中分发 Action

>

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

```js

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. 组合 Action

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

```js

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/wait

```js

// 假设 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 才会执行。

### Module

1. 简单模式

```js

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 的状态

```

2. 模块的局部状态

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

```js

const moduleA = {

  state: { count: 0 },

  mutations: {

    increment (state) {

      // 这里的 `state` 对象是模块的局部状态

      state.count++

    }

  },

  getters: {

    doubleCount (state) {

      return state.count * 2

    }

  }

}

```

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

```js

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

    }

  }

}

```

3. 命名空间

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

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

```js

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

      },

      // 嵌套模块

      modules: {

        // 继承父模块的命名空间

        myPage: {

          state: { ... },

          getters: {

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

          }

        },

        // 进一步嵌套命名空间

        posts: {

          namespaced: true,

          state: { ... },

          getters: {

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

          }

        }

      }

    }

  }

})

```

2. 在带命名空间的模块内访问全局内容（Global Assets）

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

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

```js

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

    }

  }

}

```

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

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

```js

{

  actions: {

    someOtherAction ({dispatch}) {

      dispatch('someAction')

    }

  },

  modules: {

    foo: {

      namespaced: true,

      actions: {

        someAction: {

          root: true,

          handler (namespacedContext, payload) { ... } // -> 'someAction'

        }

      }

    }

  }

}

```

4. 带命名空间的绑定函数

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

```js

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

  ])

}

```

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

```js

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'

    ])

  }

}

```