Vuex

组件之间传值

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

父组件向子组件传值 props
子组件向父组件传值 $emit
非父子组件之间传值 : 爷孙；兄弟
- 发布订阅模式（微博：大V----粉丝）

基于Vue实现发布订阅模式

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

通过兄弟组件之间的传值进行验证

总结：

少量的组件之间数据传递可以用这种模式

但是不建议大量的组件通信采用这种机制（代码比较乱，后期维护比较麻烦）

状态管理必要性分析

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

如果使用了Vuex，就可以非常方便的进行复杂的组件之间数据传递（非父子关系）

总结：

所有组件的数据进行统一管理（存储和变更），每个组件内部就不再需要维护这些数据了

数据变更时，统一修改Store中数据即可，组件中用到这个数据的组件会自动更新（数据是响应式的）

Vuex介绍

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

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

getters相当于在State和组件之间添加一个环节（对state中的数据进行加工处理后再提供给组件）
getters不要修改state中的数据

初始化项目

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

第一步：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')

总结：

初始化store对象

把store对象挂载到Vue实例中

状态state

初始化状态

状态state用于存储所有组件的数据。

管理数据

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

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

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

使用计算属性：

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

总结：

state中的数据是自定义的，但是state属性名是固定的

获取数据可以通过 $store.state

可以使用计算属性优化模板中获取数据的方式

计算属性不可以使用箭头函数（箭头函数本身是没有this的，实际上用的是父级函数中的this）

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'])
}

总结：

1、是否组件的所有数据都应该放到Store中？不一定（数据仅仅需要在本组件使用，那么没有必要放到Store），放到Store中的数据一般需要多个组件共享。

2、mapState

基本使用

简化用法

自定义和映射计算属性结合。

状态修改mutations

状态修改基本操作

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

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

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

定义状态修改函数

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

组件中调用

  methods: {handleClick1 () {// 通过触发mutation修改state中的count的值this.$store.commit('increment', 2)},handleClick2 () {this.$store.commit('decrement', 1)}},

总结：

先定义（mutations），再出发 this.$store.commit(‘mutation的名称，参数’)

mutation的本质就是方法，方法名称自定义，mutation函数内部负责处理的变更操作。

一种操作就是一个mutation，不同的mutation处理不同的场景。

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)// }
}

总结：

mapMutations函数的作用：简化methods的定义

原始方式：通过$store.commit方法触发mutation

简写方式一：对象写法

简写方式二：数组写法

异步操作action

异步获取数据

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

安装axios的包

npm i axios
//导入包
import axios from 'axios'

定义获取数据方法

// actions是固定的，用于定义异步操作的动作（函数）
actions: {// 定义了一个action，用于查询接口数据async queryData (context, payload) {console.log(payload)// 调用接口获取数据const ret = await axios.get('http://test.zjie.wang/tab')// 必须触发mutation修改list的值// context类似于this.$storecontext.commit('updateList', ret.data.list)}
},
mutations: {updateList (state, payload) {state.list = payload}
}

组件使用：

methods: {handleQuery () {// 触发action(必须调用dispatch方法)this.$store.dispatch('queryData', 111)}
}

总结：

action的作用：处理异步任务，获取异步结果后，把数据交给mutation更新数据

触发action需要使用 this.$store.dispatch

mapActions

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

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

总结：

原始方式：this.$store.dispatch(‘queryData’, num)

简化方式一：对象

简化方式二：数组

getters用法

目标：熟悉getters的应用场景和具体使用步骤

先定义getters

// 相当于state的计算属性（基于State处理成另外一份数据）
// getters的主要应用场景：模板中需要的数据和State中的数据不完全一样
// 需要基于state中的数据进行加工处理，形成一份新的的数据，给模板使用
getters: {getPartList (state) {return state.list.filter(item => {return item.id > 1})}
}

再使用getters

基本使用

caleList () {// 注意：获取getters的值，不需要加括号（当属性使用）return this.$store.getters.getPartList
},

简化用法

import { mapGetters } from 'vuex'
// mapGetters的作用：把getters映射为计算属性
computed: {...mapGetters(['getPartList']),// ...mapGetters({//   calcList: 'getPartList'// }),// calcList () {//   // 注意：获取getters的值，不需要加括号（当属性使用）//   return this.$store.getters.getPartList// },
}

总结：

getters相当于在State和组件之间添加一个环节（对state中的数据进行加工处理后再提供给组件）

getters不要修改state中的数据

getters类似之前的计算属性（基于state中的数据进行计算）

总结

基于发布订阅模式处理非父子组件之间的数据传递
- const eventBus = new Vue()
- 订阅 eventBus.$on(‘事件名称’,事件处理函数)
- 发布 eventBus.$emit(‘事件名称’, 传递的数据)
vuex
- vuex的核心思想：组件数据统一管理（统一存储，统一修改）
- vuex具体实现的核心概念
  - state 用来保存组件的数据
    - 基本使用
    - 简化用法 mapState
  - mutations 用来修改state中的数据（数据是响应式的）
    - 基本使用
    - 简化用法 mapMutations
  - actions 用来处理异步任务，获取异步的结果，但是不可以修改数据
    - 基本使用
    - 简化用法 mapActions
  - getters 用来处理state中的数据，方便给组件提供符合需求的数据格式
    - 基本使用
    - 简化用法 mapGetters

最详细Vuex教程（超详细）-基本使用相关推荐

python详细安装教程-超详细Python与PyCharm安装教程，看这一篇就够了
原标题:超详细Python与PyCharm安装教程,看这一篇就够了学习了三天的python, 之前测试一直用课程自带的网页版玩玩, 为了学习然后就下载了一个python和pycharm 现在分享下 ...
maven配置阿里云_阿里云OSS PicGo 配置图床教程超详细
阿里云OSS和PicGo配置图床教程超详细废话不多说,直接开始购买阿里云OSS服务登录阿里云打开侧边栏,选择对象存储OSS,如下图: 对象存储界面右部选择创建Bucket,如下图所示: 之后 ...
svn安装教程 mysql_CentOS6.4 下安装SVN的详细教程(超详细)
1.检查系统是否已经安装如果安装就卸载 rpm -qa subversion yum remove subversion 2.安装 yum install subversion 3.建立SVN库 mk ...
新版Android Studio(4.1.1 for Windows 64-bit)的安装教程(超详细)
新版Android Studio(4.1.1 for Windows 64-bit)的安装教程(超详细) 获取Android Studio软件在心仪的磁盘新建文件夹:AndroidStudio(文件 ...
【台大郭彦甫】Matlab入门教程超详细学习笔记二：基本操作与矩阵运算（附PPT链接）
Matlab入门教程超详细学习笔记二:基本操作与矩阵运算前言一.基本操作 1.把matlab当作计算器使用 2.变量 3.控制格式输出二.矩阵运算 1.矩阵 2.矩阵索引 3.使用:创建向量 4 ...
windows安装Weblogic教程(图文教程超详细版)
windows安装Weblogic教程(超详细) 一. 下载 WebLogic 到Oracle官网http://www.oracle.com/ 下载WebLogic(根据自己的情况选择),本文档下载的 ...
阿里云OSS PicGo 配置图床教程超详细
阿里云OSS和PicGo配置图床教程超详细废话不多说,直接开始购买阿里云OSS服务登录阿里云打开侧边栏,选择对象存储OSS,如下图: 对象存储界面右部选择创建Bucket,如下图所示: 之后 ...
exe电子书制作教程(超详细)【申明：来源于网络】
exe电子书制作教程(超详细)[申明:来源于网络] 地址:http://wenku.baidu.com/view/0b046907eff9aef8941e0631.html
Centos7环境下安装Mysql8详细教程(超详细，亲测百分百成功)
Centos7环境下安装Mysql8详细教程(超详细,亲测百分百成功) 文章目录 Centos7环境下安装Mysql8详细教程(超详细,亲测百分百成功) 1.上传或者下载mysql安装包 2.检查是否 ...
Redis安装教程超详细
Redis安装教程超详细一.Redis安装 1.windows下安装 2.Linux下安装一.Redis安装 1.windows下安装默认端口:6379 1.下载链接 https://githu ...

最详细Vuex教程（超详细）-基本使用

Vuex

组件之间传值

状态管理必要性分析

Vuex介绍

初始化项目

状态state

初始化状态

mapState

状态修改mutations

状态修改基本操作

mapMutations

异步操作action

异步获取数据

mapActions

getters用法

总结

最详细Vuex教程（超详细）-基本使用相关推荐

最新文章

热门文章