vuex知识点

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式；集中存储和管理应用的所有组件状态。

• 状态：什么是状态，我们可以通俗的理解为数据。Vue只关心视图层，那么视图的状态如何来确定？我们知道是通过数据驱动，这里的状态管理可以简单理解为管理数据。

• 集中存储：Vue只关心视图，那么我们需要一个仓库（Store）来存储数据，而且是所有的数据集中存储，视图和数据就可以分析。

• 管理：除了存储，还可以管理数据，也就是计算、处理数据。

• 所有组件状态：所用的组件共用一个仓库（Store），也就是一个项目只有一个数据源（区分模块modules）。

• 总结：Vuex就是在一个项目中，提供唯一的管理数据源的仓库。

Vuex将组件公用数据抽离，在一个公共仓库管理，使得各个组件容易获取（getter）数据，也容易设置数据（setter）。

Store

Store仓库里面放了很多对象。其中state就是数据源存放地，对应于与一般Vue对象里面的data（后面讲到的actions和mutations对应于methods）。

• 在使用Vuex的时候通常会创建Store实例new Vuex.store({state,getters,mutations,actions})有很多子模块的时候还会使用到modules。

• 

• 总结，Store类就是存储数据和管理数据方法的仓库，实现方式是将数据和方法以对象形式传入其实例中。要注意一个应用或是项目中只能存在一个Store实例！！

state

响应式存储：state里面存放的数据是响应式的，Vue组件从store中读取数据，若是store中的数据发生改变，依赖这个数据的组件也会发生更新。（这里“状态”=“数据”），也就是是说数据和视图是同步的。

• 获取：在Vue组件中获取数据，最直接的可以通过计算属性中获取；

• 组件仍然可以保存局部状态：虽然说Vuex的Store仓库让我们同一管理数据变得更加方便，但是代码一多也会变得冗长，有些组件的数据是自己严格自用，我们可以将state放在组件自身，作为局部数据，专供此组件使用，其他的组件不能用。

• mapState的作用是把全局的 state 和 getters 映射到当前组件的 computed 计算属性中，this.$store.state。

• 使用示例

 import {mapState} from 'vuex'  export default {  computer :  mapState({   count: state => state.count,    'count' // 映射 this.count 为 store.state.count  })}

getters

在Store仓库里，state就是用来存放数据，若是对数据进行处理输出，比如数据要过滤，一般我们可以写到computed中。但是如果很多组件都

使用这个过滤后的数据，比如饼状图组件和曲线图组件，我们是否可以把这个数据抽提出来共享？这就是getters存在的意义。

我们可以认为，【getters】是store的计算属性。

• 定义：我们可以在store中定义getters，第一个参数是state

  const getters = {style:state => state.style}

• 传参：定义的Getters会暴露为store.getters对象，也可以接受其他的getters作为第二个参数；

• 使用：

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

mapGetters辅助函数仅仅是将store中的getters映射到局部计算属性中，用法和mapState类似

import { mapGetters } from 'vuex'

computed: {   // 使用对象展开运算符将 getters 混入 computed 对象中    ...mapGetters([    'doneTodosCount',    'anotherGetter',])} //给getter属性换名字  mapGetters({ // 映射 this.doneCount 为 store.getters.doneTodosCount  doneCount: 'doneTodosCount'})

Mutations

• getters是为了初步获取和简单处理state里面的数据(这里的简单处理不能改变 state里面的数据)，Vue的视图是由数据驱动的，也就是说state里面的数据是动态变化的，那么怎么改变呢，切记在Vuex中store数据改变的唯一方法就是mutation！

• 通俗的理解mutations,里面装着一些改变数据方法的集合，这是Veux设计很重要的一点，就是把处理数据逻辑方法全部放在mutations里面，使得数据和视图分离。

使用方法如下

• mutation结构：每一个mutation都有一个字符串类型的事件类型(type)和回调函数(handler)，也可以理解为{type:handler()},这和订阅发布有点类似。先注册事件，当触发响应类型的时候调用handker()，调用type的时候需要用到store.commit方法。

   const store = new Vuex.Store({    state: {        count: 1        },    mutations: {    increment (state) {      //注册事件，type:increment，handler第一个参数是state；         // 变更状态       state.count++}}})           store.commit('increment')   //调用type，触发handler（state）            

• 载荷（payload）:简单的理解就是往handler(stage)中传参handler(stage,pryload)；一般是个对象。

    mutations: { increment (state, n) {     state.count += n}} store.commit('increment', 10)

• mutation-types：将常量放在单独的文件中，方便协作开发。

      // mutation-types.js export const SOME_MUTATION = 'SOME_MUTATION'    // store.jsimport Vuex from 'vuex'import { SOME_MUTATION } from './mutation-types'  const store = new Vuex.Store({    state: { ... },    mutations: {     // 我们可以使用 ES2015 风格的计算属性命名功能来使用一个常量作为函数名    [SOME_MUTATION] (state) {    // mutate state  }}})

• commit：提交可以在组件中使用 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({    add: 'increment' // 映射 this.add() 为 this.$store.commit('increment')  })}}

Actions

• 背景：在mutation中我们讲到，mutation中是存放处理数据的方法的集合，我们使用的时候需要commit。但是commit是同步函数，而且只能是同步执行。那我们想一步操作怎么办？

• 作用：在actions中提交mutation，并且可以包含任何的异步操作。actions可以理解为通过将mutations里面处里数据的方法变成可异步的处理数据的方法，简单的说就是异步操作数据（但是还是通过mutation来操作，因为只有它能操作）

怎么用actions：

• 定义actions

  const store = new Vuex.Store({//创建store实例      state: {         count: 0             },      mutations: {                         increment (state) {          state.count++         }          },      actions: {         //只是提交`commit`了`mutations`里面的方法。         increment (context) {          context.commit('increment')   } }    })     一般我们会简写成这样  actions: {   increment ({ commit }) {         commit('increment')      }         }

• 分发actions

  store.dispatch('increment')

• MapActions和MapState一级MapMutations类似。

Modules

• 背景：在Vue中State使用是单一状态树结构，应该的所有的状态都放在state里面，如果项目比较复杂，那state是一个很大的对象，store对象也将对变得非常大，难于管理。

• module：可以让每一个模块拥有自己的state、mutation、action、getters,使得结构非常清晰，方便管理。

• 一般结构

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

• 模块内部的数据：①内部state，模块内部的state是局部的，也就是模块私有的，比如是car.js模块state中的list数据，我们要通过this.$store.state.car.list获取；②内部getter、mutation和action，仍然注册在全局命名空间内，这是为了多模块可以同时响应同一mutation；this.$store.state.car.carGetter的结果是undefined，而通过this.$store.state.carGetter则可以拿到。

• 传参：getters====({state(局部状态),getters（全局getters对象）,roosState（根状态）})；actions====({state(局部状态),commit,roosState（根状态）}).