Vuex入门及进阶笔记

Vuex
- Vuex与全局事件总线
- - 全局事件总线
  - Vuex
- Vuex工作原理
- Vuex环境搭建
- Vuex基本使用
- - 配置`state`
  - 在`actions`中配置对应动作
  - 在`mutations`中配置对应更改
  - 在组件中使用：
- Vuex开发者工具
- Vuex进阶使用
- - Getters
  - mapState和mapGetters
  - - 对象写法
    - 数组写法
  - mapActions和mapMutations
  - - 对象写法
    - 数组写法
参考

Vuex

Vuex与全局事件总线

全局事件总线

全局事件总线不保存状态，总线只负责传递事件，状态依然由各个组件各自保存，所以如果要在组件之间同步状态需要每个组件对每个数据都有相应的事件绑定，每个组件都会存在大量的$emit和$on，比较繁琐

但是在小型项目中，组件数量较少，没有必要引入Vuex进行管理

Vuex

Vuex是专门在Vue中实现集中式状态（也就是数据）管理的插件，对应用中的多个组件的共享的数据进行集中式管理（读写），也可以进行任意组件间通信。

在多个组件依赖于同一个状态或者不同组件需要修改同一个状态的时候（“共享”的数据），推荐使用vuex。

使用Vuex后各个组件依然可以在自己内部继续保存自己的数据，如图中的y。

Vuex工作原理

Vuex由三个部分组成：Actions，Mutations，State

dispatch是一个函数，参数为(动作类型，数据值)

Actions：一个Object，包含很多Key-Value。key对应dispatch中的动作类型， value应该是一个function。在调用dispatch时，与动作类型对应的key的funciton会收到dispatch(动作类型，数据值)中的数据值。

commit是一个函数，参数为(动作类型，数据值)。需要在Actions保存的function中调用。

Mutations：一个Object，包含很多Key-Value。key对应commit中的动作类型， value应该是一个function。在调用commit时，与动作类型对应的key的funciton会收到commit(动作类型，数据值)中的数据值 以及state。

mutate是一个自动的过程，在Mutations中对state进行修改时，底层自动会完成这个过程。

State：保存的数据，一个Object，里面包含许多Key-Value，和组件中的data写法类似。

render即渲染，重新渲染到组件上，无需调用。

看似dispatch和actions是一个多余的步骤，但是dispatch调用中，数据值可以不传递，然后在actions中的function里面向后端发起请求，也可以在这里进行提前的判断。

如果没有需要，可以直接从Vue组件中直接调用commit

图中这个Vuex中包含的三个组成部分都要被一个store来管理，也就是调用的时候应该类似store.dispatch()这样，否则就变成在Window上做的dispatch了

devtools是开发者工具

下文中的$store其实就是图中绿色框vuex所包含的内容

Vuex环境搭建

安装参考官方文档，注意版本，vuex4只能对vue3使用，vuex3对vue2使用

npm i vuex@3

在src文件夹中创建vuex文件夹并命名一个文件store.js或者遵从官方写法在src中创建store文件夹命名一个index.js，后续选择官方写法

index.js:

import Vue
//引入vuex
import Vuex from 'vuex'
Vue.use(Vuex)
// 准备actions，用于响应组件内的动作
const actions = {}
//准备mutations，用于操作状态
const mutations = {}
//准备state，用于存储数据
const state = {}//创建并暴露store
export default new Vuex.Store({actions,mutations,state
})

main.js:

不要在main.js中引入Vuex，否则因为引入顺序问题会报错。在index.js中引入随后在main.js中直接引入store就可以避免这个问题

import store from './store/index'
new Vue({//...store,//...
})

Vuex基本使用

配置`state`

index.js:

const state = {exampleNumber: 1// ...
}

在组件methods中调用$store.dispatch()

methods: {example () {// value可选，可在actions中配置异步ajax(axios)从后端获取this.$store.dispatch('actionName'[, value])// 或者如果没有其他逻辑只需要更新state，可以直接调用commit// this.$store.commit('ACTIONNAME', value)}
}

在`actions`中配置对应动作

index.js:

const actions = {/* 非简写actionName: function () {//....}*/// 简写，后文不再指出actionName (context, value) {// context是“上下文”，里面包含了dispatch，commit，以及state等// value 是methods中调用时传入的值,// 为作区分，此处的对应的名字常用大写（对应到mutations中）context.$commit('ACTIONNAME', value)// 也可以添加对值的判断等其他逻辑}
}

为什么要给一个context：

里面有dispatch，可以同时触发其他的actions；有state，可以添加业务逻辑对状态进行判断然后输出

但是不要在actions里对state进行修改，否则开发者工具无法捕获这次修改

在`mutations`中配置对应更改

index.js:

const mutations = {ACTIONNAME (state, value) {state.exampleNumber += value}
}

业务逻辑或Ajax请求在actions中完成，mutations中仅完成对state的更改

在组件中使用：

<template>//...{{$store.state.exampleNumber}}//...
</template>

Vuex开发者工具

也就是vue的那个开发者工具，F12打开选到Vue，然后选中state选框或按CTRL+2 随后即可查看state

每一个mutations里面的动作都会被记录在这个开发者工具中

图太小了水印盖完了所以没有放

每个mutation后面对应的三个功能键的功能分别是

把这个mutation提交到base state

抛弃该mutation（但是依赖于该mutation的后续mutation都会被一起抛弃）

回溯到该mutation

上方三个功能键对应

合并所有mutation到base state

清除所有mutation

录制mutation：点击后关闭，后面的mutation不会捕获到工具

导出和导入mutation，可以保存“操作步骤”以备他用

Vuex进阶使用

Getters

需要复用对某个状态作出有逻辑的处理时(类似computed)可以配置getters

理解：state是数据源，getters对数据源加工后，可以直接在组件内使用

逻辑复杂且需要复用时推荐配置

index.js

//...
const getters = {exampleNum (state) {return state.exampleNumber * 10 //....}
}export default new Vuex.Store({actions,mutations,state,getters
})

在组件中使用：

<template>{{$store.getters.exampleNum}}
</template>

mapState和mapGetters

为了简化在组件中使用的插值语法$store.getters.exampleNum

在原来的插值语法中，我们需要写以下内容来使用状态：

<template>//...{{$store.state.exampleNumber}}//...
</template>

如果想简化为：

<template>//...{{exampleNumber}}//...
</template>

一般思路是使用computed增加一个exampleNumber，在其中return this.$store.state.exampleNumber

但是vuex考虑到了这点，并提供了相应函数

从vuex上引入mapState

import {mapState} from 'vuex'

然后在组件的computed中：

对象写法

computed () {//...// 用...mapState来把mapState里面的每一个项展开放进computed中...mapState({key:'stateName', key1:'stateName1'})// 注意：即使key与stateName一致，也不能采用只写key的简写形式如：// {stateName, stateName1}，// 因为这样展开其实变成了{stateName:stateName ...}注意他的值是变量不是字符串// 随后因为找不到该变量会报错//...
}

数组写法

computed () {...mapState(['stateName','stateName1'])
}

随后在组件中就可以写成{{key}}的形式

并且开发者工具会指出哪一些key是绑定到vuex的！展开组件可以看到vuex bindings

注意，mapState只能为state服务。

mapGetters同理。

mapActions和mapMutations

帮助生成与mutations对话的方法（简化commit），用mapMutations

对象写法

同理，在methods中使用

methods () {...mapMutations({increment:'JIA'})// 等同于：/*increment (value) {this.$store.commit('JIA', value)}*/// 调用时需要传参
}

借助mapMutations生成对应的方法，方法中会调原commit去联系mutations

数组写法

同理，method名字与commit中的名字一致时可以使用数组写法

...mapMutations(['JIA','JIAN'])

这样的话调用method就用JIA(value)

帮助生成与actions对话的方法（简化dispatch），用mapActions，用法同理

mapAcitons和mapMutations使用时，若需要传参需在模板中绑定事件时传参，否则默认传入事件对象

参考

https://www.bilibili.com/video/BV1Zy4y1K7SH

Vuex入门及进阶笔记相关推荐

python3入门与进阶笔记_16_变量进阶 — 黑马程序员《Python入门教程完整版》笔记...
变量进阶(理解) - 黑马程序员<Python入门教程完整版>笔记目标变量的引用可变和不可变类型局部变量和全局变量 01. 变量的引用变量和数据都是保存在内存中的在 Py ...
python3入门与进阶笔记_我的Python3萌新入门笔记
Python3萌新入门笔记是一系列真实的自学笔记. 当然,它也是比较全面的入门教程,共包括54篇笔记. 从第一篇笔记开始,大半年的时间我都是在自学和组织教程内容. 我觉得有必要,把我自己的学习过程和大 ...
[Python入门及进阶笔记]Python-魔术方法小结(方法运算符重载)
博客迁往:新地址 (点击直达) 新博客使用markdown维护,线下有版本库,自己写的所以会定时更新同步,同时提供更好的导航和阅读体验 csdn对markdown支持不好,所以旧版不会花时间进行同步修 ...
python3入门与进阶笔记_【基础】学习笔记6-python3 Turtle库_实操进阶3
# 樱花:有设置阴影效果 import turtle ast importmath importrandom def SetTurtle(): # t.colormode(255) # 采用0-25 ...
python3入门与进阶笔记_Python3入门与进阶【笔记】
1.二.八.十六进制转十进制:int('10', base=2).int('10', base=8).int('10', base=16): 2.八.十.十六进制转二进制:bin(0o+xxx).bi ...
Python3入门与进阶笔记（五）：函数
目录简介拆装包可变参数默认参数+关键字参数可变参数+关键字参数返回值全局变量 VS 局部变量简介函数的参数列表可以有,也可以没有. return语句可以返回值也可以返回None,不写 ...
python文件处理基础_[Python入门及进阶笔记]Python-基础-文件处理小结
博客迁往:新地址(点击直达) 新博客使用markdown维护,线下有版本库,自己写的所以会定时更新同步,同时提供更好的导航和阅读体验 csdn对markdown支持不好,所以旧版不会花时间进行同步修订 ...
读书笔记：《SEO教程：搜索引擎优化入门与进阶》（4）——代码优化
--对HTML源代码进行必要的调整. 1.去掉冗余代码 --降低页面体积 --提高搜索引擎友好性做法: 去掉每行代码前面.后面的空格字符: 去掉空白行: 2. HTML标签转换 --使用短标签替换同 ...
读书笔记：《SEO教程：搜索引擎优化入门与进阶》（2）——关键字
关键字的位置和形式搜索引擎分析网页时,在HTML源代码中是自上而下进行的,因此搜索引擎会更加重视网页源代码中首先出现的内容,因此在规划页面时,应非常重视页面的<head>节点: < ...
《Flask Web开发实战：入门、进阶与原理解析》读书笔记
写在前面学docker编排,有一个用Flask框架的Demo,感觉挺方便,所以学习下基于<Flask Web开发实战:入门.进阶与原理解析>做的读书笔记个人还是比较喜欢看书,看书的话 ...

Vuex入门及进阶笔记

Vuex入门及进阶笔记

Vuex

Vuex与全局事件总线

全局事件总线

Vuex

Vuex工作原理

Vuex环境搭建

Vuex基本使用

配置`state`

在`actions`中配置对应动作

在`mutations`中配置对应更改

在组件中使用：

Vuex开发者工具

Vuex进阶使用

Getters

mapState和mapGetters

对象写法

数组写法

mapActions和mapMutations

对象写法

数组写法

参考

Vuex入门及进阶笔记相关推荐

最新文章

热门文章

Vuex入门及进阶笔记

Vuex入门及进阶笔记

Vuex

Vuex与全局事件总线

全局事件总线

Vuex

Vuex工作原理

Vuex环境搭建

Vuex基本使用

配置state

在actions中配置对应动作

在mutations中配置对应更改

在组件中使用：

Vuex开发者工具

Vuex进阶使用

Getters

mapState和mapGetters

对象写法

数组写法

mapActions和mapMutations

对象写法

数组写法

参考

Vuex入门及进阶笔记相关推荐

最新文章

热门文章

配置`state`

在`actions`中配置对应动作

在`mutations`中配置对应更改