黑马程序员技术交流社区

标题: 长沙黑马程序员: 老毛带你玩转Vue 全局状态管理VUEX [打印本页]

作者: 长沙-小知姐姐    时间: 2020-4-17 11:25
标题: 长沙黑马程序员: 老毛带你玩转Vue 全局状态管理VUEX
本帖最后由 长沙-小知姐姐 于 2020-4-17 11:28 编辑

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

状态是什么?在程序中用什么来描述?

说白了状态就是数据,Vuex就是用来管理我们项目中的一些共享数据的,没有Vuex的时候,我们的数据是放在组件的data选中的,在组件通讯的时候,我们有对应的手段,但相对来说传递数据比较麻烦:

父子通讯:props,$emit,事件监听

兄弟通讯:EventHub,$on、$emit、$off

什么时候使用Vuex?

需要你进行权衡,小型项目不需要,随着业务功能的复杂程度,可以加入进去。

单向数据流:不能直接在子组件中变更父组件传递过来的数据

核心概念
State
状态,数据

数据获取
在这里可以定义一些全局共享的数据,在各个组件中可以通过this.$store.state.xxx

注意:一定要是全局的(有两个组件以上使用),如果只有本组件使用,那么就没有必要定义到store中去,定义到局部的data中即可

辅助方法
导入:import { mapState } from 'vuex'

使用:


new Vue({

  computed: {

    ...mapState(['count', 'xxx'])

    // 把count和xxx当计算属性用就行了



    // 这个mapState(['count', 'xxx'])函数调用完后的返回值形如:{ count() {}, xxx() {} },用...扩展表达式拆开后,获取到键值对,直接放入到computed对象中了

  }

})


Getter
state计算属性,和计算属性的区别在于,计算属性是定义在组件中的,是局部的,而getter定义在vuex的store中,是全局的,所有组件都能访问到,当我们需要抽取出一些基于state的公共计算属性时,就可以用这个getter统一定义

辅助方法:
导入:import { mapGetters } from 'vuex'

使用:


new Vue({

  computed: {

    ...mapGetters(['getCountMsg', 'xxx'])

    // 把getCountMsg和xxx当计算属性用就行了

  }

})


Mutation

突变,变异,就是用来改变state,很纯洁,就做一件事

注意:不能有异步操作,不符合规范

高能:更改 Vuex 的 store 中的状态(state)的唯一方法是提交 mutation

可以通过:this.$store.commit('mutaionName', payload)调用到mutation

mutationName就是mutation的函数名

payload就是数据(载体)

注意:这里只能传递一个参数,如果需要传递多个,可以通过数组或对象
辅助方法:
导入:import { mapMutations } from 'vuex'

使用:


new Vue({

  methods: {

    ...mapMutations(['increaseCount', 'decreaseCount'])

    // 把increaseCount和decreaseCount当方法就行了

  }

})


Action
动作,可以在这里写一些业务逻辑,触发突变(Mutation),允许有异步操作

Action 类似于 mutation,不同在于:

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

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

辅助方法:
导入:import { mapActions } from 'vuex'

使用:


new Vue({

  methods: {

    ...mapActions(['increaseCountAsync', 'decreaseCountAsync'])

    // 把increaseCount和decreaseCount当方法就行了

  }

})

Module
模块,随着业务复杂度上升,对应的代码肯定比较臃肿,我们可以用模块(Module)来对代码进行重构瘦身,提高代码的可读性

访问模块的state:$store.state.user.name

访问模块的getters:

调用模块的mutations:...mapMutations('user', ['changeName', 'xxx']), // 模块的mapMutations使用

第一个参数user表示命名空间
调用模块的actions:

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

如果希望你的模块具有更高的封装度和复用性,你可以通过添加 namespaced: true 的方式使其成为带命名空间的模块。

注意:模块中的mutations只能拿到本模块的state,但是getters和actions可以获取到

严格模式
开启严格模式,仅需在创建 store 的时候传入 strict: true:


const store = new Vuex.Store({

  // ...

  strict: true

})


在严格模式下,无论何时发生了状态变更且不是由 mutation 函数引起的,将会抛出错误。这能保证所有的状态变更都能被调试工具跟踪到。

一般我们都会加上,但是在生成环境不要加上,因为会实时监测,有性能资源浪费

类似于插件,我们可以让构建工具来处理这种情况:


const store = new Vuex.Store({

  // ...

  strict: process.env.NODE_ENV !== 'production'

})


表单处理
想要使用v-model指令绑定store中的state数据,可以使用带有set/get的计算属性

补充说明:mapState、mapGetters方法 computed 选项中、mapMutations、mapActions 放到 methods 选项中

更多资料可以+csheima7






欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/) 黑马程序员IT技术论坛 X3.2