Vuex

组件之间传值

目标：熟悉组件之间传值的各种情况（关注非父子之间传值）

父组件向子组件传值 props
子组件向父组件传值 $emit
非父子组件之间传值 : 爷孙；兄弟
- 发布订阅模式

基于Vue实现发布订阅模式

// 相当于中介
const eventBus = new Vue()
// 订阅事件
eventBus.$on('event-b', (param) => {this.counta = this.counta + '----' + param
})
// 发布事件
eventBus.$emit('event-b', 123)

状态管理必要性分析

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。

Vuex介绍

目标：熟悉Vuex是如何实现上述集中管理组件数据这种思想（模式）的

state 管理组件数据，管理的数据是响应式的，当数据改变时驱动视图更新。
mutations 更新数据，state中的数据只能使用mutations去改变数据（只能处理同步的场景）
actions 请求数据，响应成功后把数据提交给mutations（可以处理异步的场景）
Devtools指的是浏览器的Vue插件调试工具

初始化项目

目标：基于脚手架初始化项目

第一步：npm i vuex --save/-S
第二步：创建store.js import vuex from 'vuex' import vue from 'vue'
第三步：Vue.use(vuex)
第四步：const store = new Vuex.Store({...配置项})
第五步：导出 export default store
第六步：导入main.js 在根实例配置 store 选项指向 store 实例对象

// 初始化一个vuex的实例（数据仓库） 导出即可
import Vuex from 'vuex'
import Vue from 'vue'// 使用安装
Vue.use(Vuex)// 初始化
const store = new Vuex.Store({// 配置（state|mutations|actions）
})export default store

import store from '@/store'
new Vue({// 把store对象挂载到vue实例对象中，这样就可以在所有的组件中获取store中的数据了store,render: h => h(App),
}).$mount('#app')

状态state

初始化状态

管理数据

// 初始化vuex对象
const store = new vuex.Store({state: {// 管理数据count: 0}
})

在组件获取state的数据：原始用法插值表达式

<div>A组件 state的数据：{{$store.state.count}}</div>

使用计算属性：

// 把state中数据，定义在组件内的计算属性中
computed: {// 1. 最完整的写法// count: function () {//   return this.$store.state.count// },// 2. 缩写count () {return this.$store.state.count}
}
// 不能使用剪头函数  this指向的不是vue实例

mapState

目标：简化获取store数据的代码

把vuex中的state数据映射到组件的计算属性中。

import { mapState } from 'vuex'

使用：mapState(对象)

// 使用mapState来生成计算属性  mapState函数返回值是对象
// 使用mapState使用对象传参
// computed: mapState({
//   // 1. 基础写法 (state) 代表就是vuex申明的state
//   // count: function(state) {
//   //   return state.count
//   // }
//   // 2. 使用箭头函数
//   // count: state => state.count
//   // 3. vuex提供写法 (count是state中的字段名称)
//   count: 'count',
//   // 4. 当你的计算属性 需要依赖vuex中的数据 同时  依赖组件中data的数据
//   count (state) {
//     return state.count + this.num
//   }
// })

使用：mapState(数组)

// 2、mapState参数是一个数组
// computed: mapState(['count', 'total'])

如果组件自己有计算属性，state的字段映射成计算属性

// 3、即在内部保留原有的计算属性，又要把store中的数据映射为计算属性
computed: {// 组件自己的计算属性calcNum () {return this.num + 1},// 把mapState返回值那个对象进行展开操作（把对象的属性添加到该位置）...mapState(['count'])
}

状态修改mutations

状态修改基本操作

目标：Vuex规定必须通过mutation修改数据，不可以直接通过store修改状态数据。

为什么要用mutation方式修改数据？Vuex的规定

为什么要有这样的规定？统一管理数据，便于监控数据变化

定义状态修改函数

// mutations是固定的，用于定义修改数据的动作（函数）
mutations: {// 定义一个mutation，用于累加count值// increment这个名字是自定义的increment (state, payload) {// state表示Store中所有数据// payload表示组件中传递过来的数据state.count = state.count + payload}
}

组件中调用

handleClick () {// 从js语法角度，是否可以这样修改对象的属性值？可以// 但是我们不应该这样修改数据（Vuex不建议这样修改数据）// this.$store.state.count++// 那么Vuex建议如何修改数据？通过mutation修改// 触发mutationthis.$store.commit('increment', 5)
}

mapMutations

把vuex中的mutations的函数映射到组件的methods中
通俗：通过mapMutations函数可以生成methods中函数

methods: {// 1、对象参数的写法// ...mapMutations({//   // 冒号右侧的increment是mutation的名称//   // 冒号左侧的increment是事件函数的名称，可以自定义//   increment: 'increment'// })// 2、数组参数的写法（事件函数名称和mutation名称一致）...mapMutations(['increment'])// 3、这种写法和第2种等效// increment (param) {//   // 点击触发该函数后要再次触发mutation的//   this.$store.commit('increment', param)// }
}

异步操作action

异步获取数据

目标：主要用于处理异步的任务

定义获取数据方法

// actions是固定的，用于定义异步操作的动作（函数）
actions: {increment (context, payload) {// context 执行上下文（vuex提供的一个对象，它当中包含了vuex提供的一些方法）// context可以理解为this.$store（但是不完全一样---约等于）// context === this.$store.commit()// this.$store.commit()// context.commit()// payload表示触发action时传递的参数// 这里要实现的功能：2秒后修改数据setTimeout(() => {// 修改数据必须通过mutationcontext.commit('increment', payload)}, 2000)}
}

组件使用：

methods: {handleClick () {// 触发action(必须调用dispatch方法)this.$store.dispatch('increment', 2)}
}

mapActions

mapActions辅助函数，把actions中的函数映射组件methods中
通俗：通过mapActions函数可以生成methods中函数

// 相当于 methods申明了一个函数fn(num){ this.$store.dispatch('getData', num)}
// ...mapActions({//   fn: 'queryData'
// })
// 相当于 methods申明了一个函数getData(num){ this.$store.dispatch('getData', num)}
...mapActions(['queryData'])

vuex使用详细说明及实例相关推荐

OpenCL编程详细解析与实例
OpenCL编程详细解析与实例 C语言与OpenCL的编程示例比较参考链接: https://www.zhihu.com/people/wujianming_110117/posts 先以图像旋转的 ...
Nginx反向绑定域名方法和详细操作应用实例:Google和Gravatar
2019独角兽企业重金招聘Python工程师标准>>> 反向绑定域名,即将域名B绑定到域名A上,用户只要访问B就等同于进入A,内容都是由A提供,它有点像建立了一个A的镜像.什么时候要 ...
Vue Vuex的详细教程
Vue Vuex的详细教程 Vuex 是什么? Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式.它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变 ...
pythongui项目实例_python GUI库图形界面开发之PyQt5状态栏控件QStatusBar详细使用方法实例...
PyQt5状态栏控件QStatusBar简介 MainWindow对象在底部保留有一个水平条,作为状态栏(QstatusBar),用于显示永久或临时的状态信息 QStatusBar类中的常用方法方法 ...
[转载] python中pass的使用_Python pass详细介绍及实例代码
参考链接: Python pass语句 Python pass详细介绍及实例代码 Python pass的用法: 空语句 do nothing 保证格式完整保证语义完整以if语句为例,在c或c++ ...
qtabwidget设置表头_Qt GUI图形图像开发之QT表格控件QTableView,QTableWidget复杂表头(多行表头) 及冻结、固定特定的行的详细方法与实例...
我们在开发过程中对于表格使用频率还是挺高的,使用QT框架开发时候我们使用QTableView或者QTableWidget创建表格. 其中表格分为表格头与表格体: 对于简单地表格,我们可以设置表头来满 ...
大疆 DJI mobile SDK系列详细教程——运行实例代码（跑通大疆官方提供Mobile SDK里的sample code）
大疆 DJI mobile SDK系列详细教程--运行实例代码(跑通大疆官方提供Mobile SDK里的sample code) 文章目录一.官方文献与资源地址二.操作步骤提示:昨天在尝试跑通大 ...
tablewidget 多行表头_Qt GUI图形图像开发之QT表格控件QTableView,QTableWidget复杂表头(多行表头) 及冻结、固定特定的行的详细方法与实例...
我们在开发过程中对于表格使用频率还是挺高的,使用QT框架开发时候我们使用QTableView或者QTableWidget创建表格. 其中表格分为表格头与表格体: 对于简单地表格,我们可以设置表头来满 ...
linux awk 内置函数详细介绍（实例）
原文地址为: linux awk 内置函数详细介绍(实例) 这节详细介绍awk内置函数,主要分以下3种类似:算数函数.字符串函数.其它一般函数.时间函数一.算术函数: 以下算术函数执行与 C 语言中 ...

vuex使用详细说明及实例

Vuex

组件之间传值

状态管理必要性分析

Vuex介绍

初始化项目

状态state

初始化状态

mapState

状态修改mutations

状态修改基本操作

mapMutations

异步操作action

异步获取数据

mapActions

vuex使用详细说明及实例相关推荐

最新文章

热门文章