Vue教程之Vuex 详解

Vuex 是什么？

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。

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

简单来说 : vuex 是 Vue 配套的 公共数据管理工具，它可以把一些共享的数据，保存到 vuex 中，方便 整个程序中的任何组件直接获取或修改我们的公共数据。

使用场景

整个项目开发过程中，你一定遇到过多个状态，在多个界面间的共享问题，比如用户的登录状态、用户名称、头像、地理位置信息等等。比如商品的收藏、购物车中的物品等等。这些状态信息，我们都可以放在统一的地方，对它进行保存和管理，而且它们还是响应式的。

单组件的状态管理

• State：不用多说，就是我们的状态。（姑且当做是data中的属性）
• View：视图层，可以针对State的变化，显示不同的信息。
• Actions：这里的Actions主要是用户的各种操作：点击、输入等，会导致状态的改变

多组件的状态管理

我们现在要做的就是将共享的状态抽取出来，交给我们的 Vuex，统一进行管理。

之后，每个视图，按照规定好的方式，进行访问和修改等操作。

这就是Vuex背后的基本思想。

Vuex 的核心概念

• State 提供唯一的公共数据源，所有共享的数据都要统一放到 Store 的 State 中进行存储。
• Mutation 用于变更 Store中 的数据。
• Action 用于处理异步任务，触发Mutation的任务。
• Getters 用于对 Store 中的数据进行加工处理形成新的数据。
• Module 将store分割成模块,每个模块都有state、mutation、action、getter、甚至嵌套子模块

State

State 中写入数据

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    count: 0
  }
})

全局方式读取 State 中的数据

this.$store.state.count

使用 Vuex 提供的 mapState 读取 State 中的数据

<script>
import { mapState } from 'vuex'
export default {
  computed: {
    // 将数据，映射为当前组件的计算属性 
    ...mapState(['count']) 
  }
}
</script>

mutation

• 只能通过 mutation 变更 Store 数据，不可以直接操作 Store 中的数据。
• 通过这种方式虽然操作起来稍微繁琐一些，但是可以集中监控所有数据的变化。

定义 mutation 方法

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  mutations: {
    increaseCount (state, payload) {
      state.count++
    }
  }
})

全局方式触发 mutations

this.$store.commit('increaseCount')

使用 Vuex 提供的 mapMutations 触发 mutations

<script>
import { mapMutations } from 'vuex'
export default {
  methods: {
    ...mapMutations(['increaseCount'])
  }
}
</script>

Action

用于处理异步任务。

如果通过异步操作变更数据，必须通过 Action，而不能使用 Mutation，但是在 Action 中还是要通过触发 Mutation 的方式间接变更数据。

定义 action 方法

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  actions: {
    increaseCount (context, payload) {
      setTimeout(() => {
        context.commit('increaseCount')
      }, 1000)
    }
  }
})

全局方式触发 action

this.$store.dispatch('increaseCount')

使用 Vuex 提供的 mapActions 触发 action

<script>
import { mapActions } from 'vuex'

export default {
  methods: {
    ...mapActions(['increaseCount']),
  }
}
</script>

Getter

• Getter 可以对 Store 中已有的数据加工处理之后形成新的数据，类似 Vue 的计算属性。
• Store 中数据发生变化，Getter 的数据也会跟着变化。

定义 getter

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  getters: {
    remarks: state => {
      return '数量: ' + state.count + '。'
    }
  }
})

全局方式获取 getter 数据

this.$store.getters.remarks

使用 Vuex 提供的 mapGetters 触发 action

<script>
import { mapGetters } from 'vuex'

export default {
  computed: {
    ...mapGetters(['remarks'])
  }
}
</script>

module

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

总结

• mutations中的函数第一个参数都是state，后面只能接收一个参数，如果要传递多个参数，可以使用对象来传递参数，使用时使用解构获取参数。
• actions中接收参数context代表new出来的new Vuex.Store实例。
• getters中接收参数state。
• state相当于vue中的data，mutations相当于vue中的methods，actions是异步的methods，getters相当于vue中的computed属性 state，getters可以放到vue的计算属性里面 mutations，actions放在vue的methods中。