黑马程序员技术交流社区
标题:
长沙黑马程序员: 老毛带你玩转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