个人笔记-vuex

个人笔记-vuex

最近想要沉淀下自己的知识体系，以前光看不记，当时记得，过段时间记忆就模糊了，好脑子不如烂笔头，古人诚不欺我，所以现在决定给用自己的语言方式来给自己记个笔记。

vuex

vuex 有什么好讲的呢，现在的组件通讯有太多方法了，但这种作为vue全家桶里的一员，使用还是蛮广泛的，关于这方面的资料也很多，但我这个笔记是以自己的理解方式用大白话来讲的，有不对的还讲指正。(文章里的代码摘自vuex的中文官网vuex.vuejs.org/zh/)

为什么要用vuex

我们知道，vue是基于组件化的，各管各的，如果这个时候，兄弟组件之间的需要共用某个数据，该怎么通讯呢，方法有很多，比如父子级别的可以通过props和$emit来解决，爷孙级别的可以通过$attrs和$listeners来解决，如果各自相互独立的组件还可能通过中央总线事件来通讯，基本上这三种算是常见的了，当然，也有人说，可以做个全局的变量，然后大家都去拿，在大型项目开发中，这个变量你存了某个值，然后又被另一个人改了，你根本不知道是找哪个人哪行代码改了，这个时候就需要我们进行一个约定，一个特定的地方，保存我们共同的东西，通过约定的方法去更改，以便我们能定位到是谁改了，传了什么东西进来，又方便我们进行追踪。vuex还有一个好处，他里面存的是当前的状态，这就意味着，这里的发生了变化，能响应到对应的组件调用处。

共同的地方-Store

“store”基本上就是一个容器，它包含着你的应用中大部分的状态 (state)。

Vue.use(Vuex) // 重点
const store = new Vuex.Store({state: {count: 0}
})
复制代码

store实例里一定包含一个state对象，里就会存放所有的共有数据状态。

那么组件里面我要去取到这个状态该怎么做呢，首先要注入

const app = new Vue({el: '#app',// 把 store 对象提供给 “store” 选项，这可以把 store 的实例注入所有的子组件store,components: { Counter },template: `<div class="app"><counter></counter></div>`
})
复制代码

在根组件里注入，这样所属组件就能通过this.$store.state访问到store实例里的state对象了，其实这种方法在vue里很常见，包括路由啊之类的，都是通过在根组件注入，所属组件调用api的方式来取值的。

Getter

Getter有什么用呢？之前我们不是可以直接通过this.$store.state访问到实例里的state对象了吗，那还要这个有什么用呢，在我看来，Getter有三个作用

  • 可以对this.$store.state里的某个属性做计算，比如排序啊，过滤之类的
  • 可以直接通过方法访问，对state里的数据进行筛选，比如store.getters.fun(id)
  • 进行映射，这就要用到mapGetters这个辅助函数：

mapGetters

import { mapGetters } from 'vuex'export default {// ...computed: {// 使用对象展开运算符将 getter 混入 computed 对象中...mapGetters(['doneTodosCount','anotherGetter',// ...])}
}
复制代码

这样写有什么好处呢，这其实是一个映射，可能不同的理解解释的不一样，大家也不用纠结，这样写了之后可以通过this.doneTodosCount直接拿到，相当于把this.$store.state.doneTodosCount映射成了this.doneTodosCount，这样大家就再也不用噼里啪啦写一堆重复的东西了。

Mutation

之前我们提到，我们要约定一个方法去更新state里数据的状态，这个约定的方法就是提交 mutation。

const store = new Vuex.Store({...mutations: {increment (state) {// 变更状态state.count++}}
})
复制代码

每一个mutation都类似一个事件，increment就是这个事件的type,你不能直接调用这个事件的回调，需要以相应的 type 调用 store.commit 方法：store.commit('increment')

有时候我们要需要对传入的数据进加以第三方数据进行运算，文档里叫提交载荷

// ...
mutations: {increment (state, n) {state.count += n}
}
复制代码

调用store.commit('increment', 10)

文档里说载荷应该是一个对象，在大多数情况下，载荷应该是一个对象，这样可以包含多个字段并且记录的 mutation 会更易读，这块表示也蒙。。。

// ...
mutations: {increment (state, payload) {state.count += payload.amount}
}
复制代码

还有一种对象提交模式，我觉得没啥用，跳过。

mapMutations

同mapGetter,也是映射成this.的写法

import { mapMutations } from 'vuex'export default {// ...methods: {...mapMutations(['increment', // 将 `this.increment()` 映射为 `this.$store.commit('increment')`// `mapMutations` 也支持载荷：'incrementBy' // 将 `this.incrementBy(amount)` 映射为 `this.$store.commit('incrementBy', amount)`]),...mapMutations({add: 'increment' // 将 `this.add()` 映射为 `this.$store.commit('increment')`})}
}
复制代码

使用常量替代 Mutation 事件类型

这个看项目吧，大型项目可能需要，各种规范。

敲个黑板： mutation 都是同步事务，什么是同步事务呢，简单的来说就是状态变更都应该在此刻完成，不能有异步的操作，需要加入异步的操作见后面的Action知识点。

Action

Action 类似于 mutation，不同在于：Action 提交的是 mutation，而不是直接变更状态。Action 可以包含任意异步操作。

const store = new Vuex.Store({...mutations: {increment (state) {state.count++}},actions: {/* es6解构写法increment ({ commit }) {commit('increment')}*/increment (context) {context.commit('increment')}}
})
复制代码

这个context是个什么东西呢，文档上面是这么说的：与 store 实例具有相同方法和属性的 context 对象，因此你可以调用 context.commit 提交一个 mutation，或者通过 context.state 和 context.getters 来获取 state 和 getters。

Action 通过 store.dispatch 方法触发：store.dispatch('increment'),同时Action里支持异步操作，举个简单的例子

actions: {incrementAsync ({ commit }) {setTimeout(() => {commit('increment')}, 1000)}
}
复制代码

action里的写法基本上和mutationu差不多

// 以载荷形式分发
store.dispatch('incrementAsync', {amount: 10
})// 以对象形式分发
store.dispatch({type: 'incrementAsync',amount: 10
})
复制代码

mapActions

功能同之前的类似

组合 Action

组合Action，我个人用的不多，但原理要了解一下，Action支持异步，所以在Action里可以写异步的commit，包括Promise，包括多个commit依赖性的先后触发。

Module

大型项目多人会用到的东西，各自管各自的模块。每个模块都有自己对应的一套完整的store,然后再通过modules组合到顶层的store里去。

const moduleA = {state: { ... },mutations: { ... },actions: { ... },getters: { ... }
}const moduleB = {state: { ... },mutations: { ... },actions: { ... }
}const store = new Vuex.Store({modules: {a: moduleA,b: moduleB}
})store.state.a // -> moduleA 的状态
store.state.b // -> moduleB 的状态
复制代码

对于module，我觉得只需关注几个点就可了：

模块内部的 mutation 和 getter，接收的第一个参数是模块的局部状态对象，而不是顶层的了。

const moduleA = {state: { count: 0 },mutations: {increment (state) {// 这里的 `state` 对象是模块的局部状态state.count++}},actions: {incrementIfOddOnRootSum ({ state, commit, rootState }) {if ((state.count + rootState.count) % 2 === 1) {commit('increment')}}},getters: {sumWithRootCount (state, getters, rootState) {return state.count + rootState.count}}
}
复制代码

关于这块，我觉得只需关注几个点就Ok了。

现在的state都指局部的状态对象了，顶级的状态为rootState

const moduleA = {// ...getters: {sumWithRootCount (state, getters, rootState) {return state.count + rootState.count}},actions: {incrementIfOddOnRootSum ({ state, commit, rootState }) {if ((state.count + rootState.count) % 2 === 1) {commit('increment')}}}
}
复制代码

参数和非module一样，只不过多了第三个参数，这个参数指向顶级状态对象。

命名空间

默认情况下，模块内部的action ,mutation，getter是注册在全局命名空间的–这样使得多个模块能够对同一mutation或者action做出响应；如果希望你的模块更加自包含或者提高可重用性，你可以通过添加namespaced:true 的方式使其成为命名空间模块，当模块被注册后，他的所有getter,action，mutation都会自动根据模块注册的路径调整命名；x

转载于:https://juejin.im/post/5c85cff4f265da2dde0723f2

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/252037.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

常用模块之hashlib,configparser,logging模块

常用模块之hashlib,configparser,logging模块

常用模块二 hashlib模块 hashlib提供了常见的摘要算法&#xff0c;如md5和sha1等等。 那么什么是摘要算法呢?摘要算法又称为哈希算法、散列算法。它通过一个函数&#xff0c;把任意长度的数据转换为一个长度固定的数据串&#xff08;通常用16进制的字符串表示&#xff09;。 注…
阅读更多...
iPhone屏幕各种尺寸分辨率（更新至XS）

iPhone屏幕各种尺寸分辨率（更新至XS）

iPhone屏幕各种尺寸分辨率&#xff08;更新至XS&#xff09; DeviceLogic PointLogic PixelSizeScaleiPhone 2G480 320480 3203.51xiPhone 3480 320480 3203.51xiPhone 3GS480 320480 3203.51xiPhone 4480 320960 6403.52xiPhone 4S480 320960 6403.52xiPhone 5568 …
阅读更多...
浙江嘉兴徒步游

浙江嘉兴徒步游

最近参加了一个徒步团&#xff0c;趁着周末时光&#xff0c;来了一场徒步旅游&#xff0c;不一样的体验图片发自简书App一开始进山探秘外蒲岛的路程&#xff0c;荒草丛生图片发自简书App树木郁郁葱葱&#xff0c;蓝天白云&#xff0c;一切都很没好图片发自简书App漫山遍野都开满…
阅读更多...
ASP.NET Web API 2 过滤器

ASP.NET Web API 2 过滤器

前言 我们知道 ASP.NET Web API 过滤器&#xff0c;也是属于消息处理机制中的一部分。正因如此&#xff0c;我们经常使用它来完成对请求的授权验证、参数验证&#xff0c;以及请求的 Log 记录&#xff0c;程序异常捕获等。 1. 常用的四大过滤器 ASP.NET Web API 2 中的所有…
阅读更多...
java的ThreadLocal类的使用方法

java的ThreadLocal类的使用方法

java的ThreadLocal类的使用方法&#xff0c;ThreadLocal是一个支持泛型的类&#xff0c;用在多线程中用于防止并发冲突问题。比如以下的一个样例&#xff0c;就是用于线程添加1&#xff0c;可是相互不冲突 package com.test.threadlocal;import java.util.concurrent.ExecutorS…
阅读更多...
为选择合适的ERP供应商，是否该发布需求建议书（RFP）？

为选择合适的ERP供应商，是否该发布需求建议书（RFP）？

全球有成百上千家企业资源规划 (ERP) 解决方案供应商。在开展挑选 ERP 供应商的项目时&#xff0c;不可能与所有这些供应商都进行接触。不断缩小这一领域供应商的范围&#xff0c;直到最终敲定最适合的入围名单&#xff08;通常被称为“最终候选人名单”&#xff09;是项目成功…
阅读更多...
kettle插入更新流程

kettle插入更新流程

kettle转换步骤工作组件 这里有四个类构成了这个kettle 步骤/节点&#xff0c;每一个类都有其特定的目的及所扮演的角色。 TemplateStep: 步骤类实现了StepInteface接口&#xff0c;在转换运行时&#xff0c;它的实例将是数据实际处理的位置。每一个执行线程都表示一个此类的实…
阅读更多...
打开mobilenet——ssd的demo.py显示这样的错误解决方法：Intel MKL FATAL ERROR: Cannot load libmkl_avx.so or libmkl_def.s

打开mobilenet——ssd的demo.py显示这样的错误解决方法：Intel MKL FATAL ERROR: Cannot load libmkl_avx.so or libmkl_def.s

终于找到方法了&#xff1a; ubuntu14.04打开终端&#xff1a; conda install nomkl numpy scipy scikit-learn numexpr conda remove mkl mkl-service一切ok。。。。。
阅读更多...
C++ class、struct区别

C++ class、struct区别

一、默认访问控制不同&#xff08;最主要&#xff09; struct默认为public&#xff0c;class默认为private。这个访问控制既是指成员的默认访问属性&#xff0c;又指继承时默认的继承属性。 二、定义template时不同 在模版中&#xff0c;类型参数前面可以使用class或typename&a…
阅读更多...
Alpine Linux详解

Alpine Linux详解

简介 Small. Simple. Secure.Alpine Linux is a security-oriented, lightweight Linux distribution based on musl libc and busybox. Alpine Linux 是一个社区开发的面向安全应用的轻量级Linux发行版。 Alpine 的意思是“高山的”&#xff0c;它采用了musl libc和busybox以减…
阅读更多...
java stream 原理

java stream 原理

java stream 原理 需求 从"Apple" "Bug" "ABC" "Dog"中选出以A开头的名字&#xff0c;然后从中选出最长的一个&#xff0c;并输出其长度 1. 最直白的实现 缺点 迭代次数过多频繁产生中间结果&#xff0c;性能无法接受2. 平常写法 int …
阅读更多...
ubuntu文本模式获得权限修改profile

ubuntu文本模式获得权限修改profile

针对ubuntu14.04以下&#xff0c;越旧版本&#xff0c;旧的指令也有效。 进入登录页面&#xff0c;按shiftaltF1进入root环境&#xff0c;验证用户名密码。 然后输入&#xff1a;cd /etc 进入etc文件 在输入&#xff1a;/usr/bin/sudo vi profile 进入profile文件的文本编辑模…
阅读更多...
here文档 here doc EOF重定向

here文档 here doc EOF重定向

here文档 here doc EOF重定向 http://www.cnblogs.com/xiangzi888/archive/2012/03/24/2415077.html 在shell脚本程序中&#xff0c;向一条命令传递输入的一种特殊方法是使用here文档。一个here document就是一段带有特殊目的的代码段。它使用I/O重定向的形式将一个命令序列传…
阅读更多...
Java常量池理解与总结

Java常量池理解与总结

2019独角兽企业重金招聘Python工程师标准>>> 一.相关概念 什么是常量用final修饰的成员变量表示常量&#xff0c;值一旦给定就无法改变&#xff01;final修饰的变量有三种&#xff1a;静态变量、实例变量和局部变量&#xff0c;分别表示三种类型的常量。Class文件中…
阅读更多...
转载：https://blog.csdn.net/dcrmg/article/details/52939318

转载：https://blog.csdn.net/dcrmg/article/details/52939318

张正友相机标定Opencv实现以及标定流程&&标定结果评价&&图像矫正流程解析&#xff08;附标定程序和棋盘图&#xff09;使用Opencv实现张正友法相机标定之前&#xff0c;有几个问题事先要确认一下&#xff0c;那就是相机为什么需要标定&#xff0c;标定需要的输…
阅读更多...
Redis学习笔记--Redis数据过期策略详解==转

Redis学习笔记--Redis数据过期策略详解==转

本文对Redis的过期机制简单的讲解一下　　讲解之前我们先抛出一个问题&#xff0c;我们知道很多时候服务器经常会用到redis作为缓存&#xff0c;有很多数据都是临时缓存一下&#xff0c;可能用过之后很久都不会再用到了&#xff08;比如暂存session&#xff0c;又或者只存放日行…
阅读更多...
会员连锁配置以及金额走向

会员连锁配置以及金额走向

PS&#xff1a;所有电子支付方式的资金走向都是同样的&#xff0c;配置的是什么支付方式就走什么支付方式;下面以支付宝为例说明 一、连锁非总机模式 资金走向&#xff1a; 支付宝&#xff1a;收到的钱在主账号配置的支付宝&#xff0c;会员卡的金额在主账号 微信&#xff1a;收…
阅读更多...
Python标准模块--logging

Python标准模块--logging

Python标准模块--logging参考http://www.cnblogs.com/zhbzz2007/p/5943685.html1 logging模块简介logging模块是Python内置的标准模块&#xff0c;主要用于输出运行日志&#xff0c;可以设置输出日志的等级、日志保存路径、日志文件回滚等&#xff1b;相比print&#xff0c;具备…
阅读更多...
Podfile grammar

Podfile grammar

参考&#xff1a;http://www.jianshu.com/p/8af475c4f717 Podfile Podfile文件详细描述了一个或多个工程中targets的依赖关系。Podfile会默认创建一个隐式的目标链接到工程中用户的第一个target&#xff0c;名称为“default”。 一个Podfile可以非常简单: *pod AFNetworking, ~…
阅读更多...
并发编程 - 协程 - 1.协程概念/2.greenlet模块/3.gevent模块/4.gevent实现并发的套接字通信...

并发编程 - 协程 - 1.协程概念/2.greenlet模块/3.gevent模块/4.gevent实现并发的套接字通信...

1.协程并发&#xff1a;切保存状态单线程下实现并发&#xff1a;协程 切 保存状态 yield 遇到io切&#xff0c;提高效率 遇到计算切&#xff0c;并没有提高效率 检测单线程下 IO行为 io阻塞 切 相当于骗操作系统 一直处于计算协程&#xff1a;。。。单线程下实现…
阅读更多...
最新文章

Copyright @ 2022~2023