1. 主页
  2. Vue2 教程
  3. Vue教程之Vuex 详解

Vue教程之Vuex 详解

Vuex 是什么?

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

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

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

使用场景

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

单组件的状态管理

  • State:不用多说,就是我们的状态。(姑且当做是data中的属性)
  • View:视图层,可以针对State的变化,显示不同的信息。
  • Actions:这里的Actions主要是用户的各种操作:点击、输入等,会导致状态的改变
Vue教程之Vuex 详解

多组件的状态管理

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

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

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

Vue教程之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中。

我们要如何帮助您?

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注