vuex学习笔记

Vuex 使用单一状态树

用一个对象就包含了全部的应用层级状态，刷新页面后，对象里面的值都会重置，和web storage里面有所区别

Vuex 包含哪些模块

1. State
2. Getter
3. Action
4. Module
5. Mutation

在 Vue 组件中获得 Vuex 状态

每当 store.state.count 变化的时候, 都会重新求取计算属性，并且触发更新相关联的 DOM。并且在main.js中全局注册后，可以在子组件中直接通过this.$store.state直接访问state中数据。

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

mapState 辅助函数

当computed中需要获取多个state参数的时候，可以使用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
    }
  })
}

Getter

getter不会像computed一样被缓存起来，我理解getter是对state中数据的一层过滤，因为用户可能不需要state某个变量里的所有值，getter把用户想要的数据摘选出来。

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

子组件中通过store.getters.doneTodos 进行访问
并且getter还能调用自身的方法，切记getter一定是把结果return出来

mapGetters 辅助函数

在computed中需要调用多个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 = createStore({
  state: {
    count: 1
  },
  mutations: {
    increment (state) {
      // 变更状态
      state.count++
    }
  }
})

store.commit 方法提交mutation

store.commit('increment')

带参mutation

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

store.commit('increment', 10)

调用方法和上面一样
下面的type是commit的属性，很容易可以得出，通过increment在mutation对象中遍历找到对应的方法

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

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

mapMutations 辅助函数

在子组件的methods中映射vuex中的mutation

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

如上所写就可以将mutation的方法映射到子组件的methods中，则可以在子组件中直接使用。

Action

• Action 提交的是 mutation，而不是直接变更状态。
• Action 可以包含任意异步操作。
• Action 通过 store.dispatch 方法触发：

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

store.dispatch('increment')

mapActions 辅助函数

将组件的 methods 映射为 store.dispatch 调用（需要先在根节点注入 store）：

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

Module

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

为了解决以上问题，Vuex 允许我们将 store 分割成模块（module）。每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块——从上至下进行同样方式的分割：

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

const moduleB = {
  state: () => ({ ... }),
  mutations: { ... },
  actions: { ... }
}

const store = createStore({
  modules: {
    a: moduleA,
    b: moduleB
  }
})

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

模块动态注册

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

import { createStore } from 'vuex'

const store = createStore({ /* 选项 */ })

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

之后就可以通过 store.state.myModule 和 store.state.nested.myModule 访问模块的状态。
你也可以使用 store.unregisterModule(moduleName) 来动态卸载模块。