官方文档很强大!!!学会阅读技术文档的能力(vuex)

我是歌谣 放弃很容易 但是坚持一定很酷 在我们的日常 我们在学习一个新的知识点
的时候 不免就需要我们有阅读文档的能力

了解vuex的产生

比如我们在学习Vuex的时候
最近开始接触新项目了 需要学习一个新项目
了解一个新的知识点
最近主要攻关Vuex这一部分的内容
看看别人封装的代码
首先我们打开官网
看一下Vuex的原理
看一下为什么需要vuex 因为他的应用场景

全局状态管理

vuex的原理

在这里插入图片描述在这里插入图片描述

这两张图是vuex的一个核心概念
通过这两张图
state,驱动应用的数据源;
view,以声明方式将 state 映射到视图;
actions,响应在 view 上的用户输入导致的状态变化。

重要的五个属性 面试必考

安装

安装就直接过去了 就是包管理工具import Vue from 'vue'
import Vuex from 'vuex'Vue.use(Vuex)const store = new Vuex.Store({state: {count: 0},mutations: {increment (state) {state.count++}}
})

state

Vuex 通过 store 选项,提供了一种机制将状态从根组件“注入”到每一个子组件中(需调用 Vue.use(Vuex)):const app = new Vue({el: '#app',// 把 store 对象提供给 “store” 选项,这可以把 store 的实例注入所有的子组件store,components: { Counter },template: `<div class="app"><counter></counter></div>`
})通过在根实例中注册 store 选项,该 store 实例会注入到根组件下的所有子组件中,且子组件能通过 this.$store 访问到。让我们更新下 Counter 的实现:const Counter = {template: `<div>{{ count }}</div>`,computed: {count () {return this.$store.state.count}}
}

getter计算属性

Getter 接受 state 作为其第一个参数:const store = new Vuex.Store({state: {todos: [{ id: 1, text: '...', done: true },{ id: 2, text: '...', done: false }]},getters: {doneTodos: state => {return state.todos.filter(todo => todo.done)}}
})

action

定义异步

const store = new Vuex.Store({state: {count: 0},mutations: {increment (state) {state.count++}},actions: {increment (context) {context.commit('increment')}}
})

mutation

更改 Vuex 的 store 中的状态的唯一方法是提交 mutation。Vuex 中的 mutation 非常类似于事件:每个 mutation 都有一个字符串的 事件类型 (type) 和 一个 回调函数 (handler)。这个回调函数就是我们实际进行状态更改的地方,并且它会接受 state 作为第一个参数:const store = new Vuex.Store({state: {count: 1},mutations: {increment (state) {// 变更状态state.count++}}
})你不能直接调用一个 mutation handler。这个选项更像是事件注册:“当触发一个类型为 increment 的 mutation 时,调用此函数。”要唤醒一个 mutation handler,你需要以相应的 type 调用 store.commit 方法:store.commit('increment')

module

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 的状态

扩展(映射函数)

map…

总结

r日常生活开发工作中 我们必须拥有阅读官方文档的能力
这样我们才能原来越强 包含react 还有比如第三方插件moment.js
等等 都需要具备这样的能力
我是歌谣 放弃很容易 但是坚持一定很酷
官方文档很强大!!!

官网链接

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

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

相关文章

读《.NET本质论》样章有感

这两天抽空看了一下《.NET本质论》&#xff0c;确实是一本经典的好书。如果说《Thinking in Java》是Java中从入门到精通的经典书籍的话&#xff0c;那么《.NET本质论》将是一本深入研究.NET技术的不可多得的佳作。我实在是不知道该如何评价这样一本好书&#xff0c;所以将多次…

PHPmysqli的 预处理执行查询语句

1 header( Content-Type:text/html;charsetutf-8 ); 2 require prepareSrarment.php;3 $mysqlinew mysqli("localhost", "root", "password, "user1", 3306);4 $mysqli->set_charset("utf8");5 //使用预编译从数据库中查询6 /…

vue一步一步带你封装一个按钮组件

# 前言 本文主要对子组件的封装做一个了解 首先我们直接看一下代码显示 首先是今天有一个学妹 过来问我如何封装子组件 # 实现效果 首先这个组件是基于eleemnt-ui进行封装的 我们看一眼实现效果 有了实现效果 之后 我们一起来看看他的父子组件 有了实现效果 之后 我们一起来看…

机器学习基础--一些基本的概念

前言 开始重新巩固一下机器学习的内容&#xff0c;先从基本的一些概念和定义开始。 本文介绍的内容如下所示&#xff1a; 机器学习的基本定义局部最优和全局最优机器学习、深度学习、数据挖掘、大数据之间的关系为什么要使用机器学习 1. 机器学习的基本定义 机器学习算法是…

COM组件简介

面向对象的思想难以适应这种分布式软件模型&#xff0c;于是组件化程序设计思想得到了迅速的发展。 按照组件化的程序设计的思想&#xff0c;复杂的应用程序被设计成一些小的&#xff0c;功能单一的组件模块&#xff0c;这些组件模块可以运行在同一台机器上&#xff0c;也可以运…

域名与国家对应表

本文转自 CBuilder 研究 - http://www.ccrun.com/other/go.asp?i240&d6dx0tl.ac – Ascension Island.ad – Andorra.ae – United Arab Emirates.af – Afghanistan.ag – Antigua and Barbuda.ai – Anguilla.al – Albania.am – Armenia.an – Neth…

[论文笔记]基于 CNN+双向LSTM 实现服饰搭配的生成

论文&#xff1a;《Learning Fashion Compatibility with Bidirectional LSTMs》 论文地址&#xff1a;https://arxiv.org/abs/1707.05691 代码地址&#xff1a;https://github.com/xthan/polyvore 1. 简介 时尚搭配推荐的需求越来越大&#xff0c;本文是基于两个方面的时尚…

WangEdit富文本编辑器增加上传视频功能

乘着今天中午的时间 对以前项目的一个需求进行一定的处理 前天去了甲方公司 接到了了一个新的需求 就是可以把项目的一个富文本的编辑器可以设置为能够上传视频 于是乎 就要对vue里面的这个组件进行操作了 首先我们可以看一眼官网的文档 需要用到的就直接到官网文档进行查询即可…

大学生应当趁早谋划未来

最近&#xff0c;有几个CSDN网友&#xff0c;主要是在校大学生&#xff0c;遇到了一些困惑&#xff0c;寻求我的“解惑”。我的表弟&#xff0c;大四即将毕业&#xff0c;也是如此。上大学的时候&#xff0c;我也经常遇到困惑&#xff0c;非常迷茫&#xff0c;我非常能理解他们…

[论文笔记]Outfit Compatibility Prediction and Diagnosis with Multi-Layered Comparison Network

Outfit Compatibility Prediction and Diagnosis with Multi-Layered Comparison Network 论文题目&#xff1a;Outfit Compatibility Prediction and Diagnosis with Multi-Layered Comparison Network 论文地址&#xff1a;https://arxiv.org/abs/1907.11496 代码&#xf…

介绍一种Web上打印技术

一、 介绍ScriptX控件对于B/S架构的项目中&#xff0c;Web打印最是让程序员头痛的技术&#xff0c;在这次项目中运用了第三方控件ScriptX解决了此技术包括各种汇总表&#xff0c;详细清单等等&#xff0c;但最大弊端就是打印的格式是死的&#xff0c;你要打印出怎样的格式必…

关于如何参与到开源项目中《How To Succeed In Open Source ( In Ways You Haven't Considered Yet )》...

转自&#xff1a;http://gaslight.co/blog/how-to-succeed-in-open-source-in-ways-you-havent-considered-yet It’s Easy to Feel Entitled in the Open Source World A while back, it was easy to think of open source projects as real products. I think that I thought…

[论文笔记]弱监督条件下基于相似性条件学习的服饰搭配生成

论文&#xff1a;《Learning Similarity Conditions Without Explicit Supervision》 论文地址&#xff1a;https://arxiv.org/pdf/1908.08589.pdf 代码地址&#xff1a;https://github.com/rxtan2/Learning-Similarity-Conditions 本文首发于 https://mp.weixin.qq.com/s/WH…

分类法过时了吗?【ZZ】

分类法过时了吗&#xff1f;引用网址: http://www.qiji.cn/baike/contents/122.html 更新日期: 2005年6月09 周四 Posted By ianwest 更多 标签: YAHOO Sina Google 页面工具: [前一项] [后一项] { 发表评论 } 计算机和互联网的出现意味着新阅读时代的来临&#xff0c;如何组织…

Linux抓包工具tcpdump命令详解

1、简介 用简单的话来定义tcpdump&#xff0c;就是&#xff1a;dump the traffic on a network&#xff0c;根据使用者的定义对网络上的数据包进行截获的包分析工具。 tcpdump可以将网络中传送的数据包的“头”完全截获下来提供分析。它支持针对网络层、协议、主机、网络或…

神经网络不收敛的 11 个原因及其解决办法

原文&#xff1a;http://theorangeduck.com/page/neural-network-not-working 原文标题&#xff1a;My Neural Network isn’t working! What should I do? 译文作者&#xff1a;kbsc13 联系方式&#xff1a; Github&#xff1a;https://github.com/ccc013 知乎专栏&…

【转贴】想应聘的瞧仔细了:HW分析大全

首先浇盆冷水&#xff1a;2000年之后进HW的人&#xff0c;彻底抛弃发财的想法。没有股票和期权&#xff0c;在HW呆和在国企呆一个样&#xff0c;就是干工资和年中一点奖金。真正发财的人是98年及以前进来的&#xff08;工号在15000以内&#xff09;&#xff0c;每年股票分红在十…