个人对vuex的表象理解(笔记)
一个东西,首先要知道为什么用它,为什么要vuex,官方解释为了解决繁杂事件订阅和广播,那么事件的$dispatch,$on,怎么就复杂了?许多人是不是感觉后者还挺简单的,对的
如果简单小型项目,那么不需要vuex,只需要后者就可以,但是如果中大型,尤其是有许多事件传播,那么vuex作用就体现出现了,为什么?ok,$dispatch,$on,这种传播,如果是单向的还好,向上,向下,但是如果非单向,那么必定是先传上去,在传下来,中间还要监听好各自事件别给我整乱了。。。试想一下,一个中大型项目,这里会发生什么?一个字乱,有的时候一个事件,对应的模块都要找半天,而vuex个人感觉相当于中介,又可以看作是模块化,一种对事件通信的模块化处理。。。对一个事件,vuex大体可以看作四步,第一到action里面查到这个事件的触发,然后立马是mutaction里面查看对应处理,第三步改变store的状态,第四部getter视图渲染;
vuex三个关键词:action,mutation,store,中文意思:活动的,突变的,储存的,注意action,mutation,getter都必须是函数
下面一个从无到有一个例子;展示vuex(以中大型结构为例 加减为例)
首先我新建个mutation-type.js,这个文件的目的是申明整个项目存在的事件有哪些。。。代码如下
export const PLUS = 'PLUS'
export const MINS = 'MINS'
//本例就是两个事件,
接着新建actions文件夹,然后建三个js文件,分别为plus和mins对应的函数操作,以及总的actions文件
代码如下(由于两者相似,以plus为例):
import {PLUS} from '../mutation-type'
export const plus = ({dispatch}, num) => { dispatch(PLUS, num)
}
意思就是我这里是处理plus的,所以我先把我事件类型里的那个plus导入过来,对组件提供一个plus函数作为接口,这个函数是进行一个plus事件的dispatch操作,所以肯定第一个参数是
dispatch,这里函数名可以任何名字,
只要与你对应组件里名字对应即可,如果组件里面传的是this,则参数可以直接进行dom操作,用法,num.$el直接获取该组件的dom节点
总的action文件代码如下:
import {del} from './actions/mins'
import {plus} from './actions/plus'
export {del,plus}
ok,现在action有了,开始对应的组件,分别plus,mins,display,以及根app,由于mins和plus相似,所以二者只写一个plus;
plus代码如下
<template>
<div>
<button @click='add(2)'>Increment +1</button>//为了注明这里的add对应是actions键key而不是value,()里面可以传参数
</div>
</template> <script>
import * as actions from '../../vuex/demo3/actions'
export default {
vuex: {
actions: {
add: actions.add
}
}
}
</script>
注意:写了actions之后,如果同时具备methods,则method无效,此外,actions里面如果传this的话,则在对应js里面接受可以通过参数的$el,进行dom操作
display组件代码如下:
<template>
<div>
<h3>plus is {{num }}</h3>
<h3>mins is {{mynum}}</h3>
</div>
</template> <script>
export default {
vuex: {
getters: {
num:({plus})=>plus.num,//这里getter的第一参数永远默认为是state,很容易理解,因为我获取的是状态,
也就是如果你直接写(plus)的话,就必须写成(plus)=》plus.plus.num
mynum:({mins})=>mins.num }
}
}
</script>
注意,如果写了getter继续写data的话,则getter无效,官网上也专门写过getter函数,就是封装相应值得处理
app代码如下
<template>
<div>
<Display></Display>
<Increment></Increment>
<mins></mins>
</div>
</template>
<script>
import store from '../../vuex/demo2/store'
import Display from './display.vue'
import Increment from './increse.vue'
import mins from './mins.vue' export default {
el:"#app",
components: {
Display, Increment,mins
},
store:store//这里如果键值一样的话,可以直接简写store
}
</script>
我要随时要监听状态吧,那得在对应模块的根目录上有个状态位吧,所以这里写store,这里有了之后,子组件会自动接收,相当于完成一个类似向下广播和监听的作用
接着是plus的mutations文件代码
import {PLUS} from '../mutation-type' const state = {
num: 0
}
const mutations={
PLUS(state,num){//注意这官网是[PLUS],但是把中括号去掉也是可以,效过没区别,这是因为你mutations-type里面const A =‘A’,变量常量是一样的,如果这里const A= bb这时候这里的
[]就有作用了,类似变量匹配的意思;
state.num=state.num+num
}
}
export default {
state,
mutations
}
这段意思大概是现在actions已经触发了,dispatch了plus事件,我得有个监听处理吧,这的
mutation就是监听对应的时间相当于之前的event选项;你要处理所以第一个参数肯定是state状态啊,第二个就是对应事件传的参数,对外传一个状态和处理函数
然后各个零件汇总得到store.js代码如下
import Vue from 'vue'
import Vuex from 'vuex'
import plus from './mutations/plus'
import mins from './mutations/mins' Vue.use(Vuex) export default new Vuex.Store({
modules:{
plus,mins
}
})
这里把这两个事件,看成各自模块,于是module选项里写入各自模块名字,对外提供一个大的vuex实例,注意这里中文文档可能不是这样写的,以英文文档为有效答案
ok这个时候运行webpack,一个中等项目结构的vuex就形成了,其实回看,既然vuex做了dispacth和boardcast做的事情并取缔了它,那么肯定具备了相应功能,什么时候需要dispatch,boardcast呢,以及哪些玩意需要保存在store里呢?我个人理解为,当一个全局组件需要一个事件才能做出对应响应,需要事件机制,比如说全局有个模态窗口,各个特定组件点击时候,都会显示各个组件对应得data时候,这时候需要事件机制,那么我那些东西需要存在store里面。这里如果有ng经验的,个人觉得可以把这个store70%理解为ng里面的rootscope,也就是类似一个全局的意思,且会根据子组件变动的东西叫store,举个例子,现在有个提示弹窗,里面有按钮和一些提示文字和数字,其中数字会根据子组件变化,而文字是死的,所以这里数字可以存在store里面;那么和localstorege有啥区别?locastorge会自动变化吗?不会,store会
当然这只是理解入门,更深一步操作,还需要各位慢慢琢磨,认识具有反复性和无限性,呵呵
个人对vuex的表象理解(笔记)的更多相关文章
- [转] 对vuex的表象理解(笔记)
一个东西,首先要知道为什么用它,为什么要vuex,官方解释为了解决繁杂事件订阅和广播,那么事件的$dispatch,$on,怎么就复杂了?许多人是不是感觉后者还挺简单的,对的 如果简单小型项目,那么不 ...
- batch normalization学习理解笔记
batch normalization学习理解笔记 最近在Andrew Ng课程中学到了Batch Normalization相关内容,通过查阅资料和原始paper,基本上弄懂了一些算法的细节部分,现 ...
- 深度学习-InfoGAN论文理解笔记
在弄清楚InfoGAN之前,可以先理解一下变分推断目的以及在概率论中的应用与ELBO是什么,以及KL散度 https://blog.csdn.net/qy20115549/article/detail ...
- vuex的简单理解
初次接触vuex,谈谈我自己的理解.有待后期改进 首先要知道,Vuex 是专门为 Vue.js 设计的状态管理库.我们知道在用vue.js进行前端项目开发时,会出现很多组件相互之间调用属性.状态,小项 ...
- cookie&&session再理解笔记
就拿php来说,两个php页面之间不拿get,post传递变量的话,数据是不能共享的.访问完1.php页面该页面的变量就被销毁了.所以就拿学校食堂来说,拿现金买饭的话你交完钱后,他给你个票以便确认你, ...
- bundle的理解笔记
Bundle是一个键值对这样一个东西.就是一个string类型的东西,对应任何类型的东西.就是用来存值的. 这里可以看到他的作用 public void onClick(View v) { Strin ...
- 对socket的一点理解笔记
需要学web service,但是在视频中讲解到了socket套接字编程.以前貌似课上老师有提过,只是没用到也感觉乏味.现在遇到,自己看了些博客和资料.记录一点理解,不知正确与否. 首先说这个名字,叫 ...
- JMS学习的个人理解笔记
Jms即java消息服务javamessage service,所谓的面向消息编程,主要应用在企业内部各个系统之间做接口,以异步方式传递消息数据. Jms有2种传送模式,先来看第一种,即点对点传送模式 ...
- hive的简单理解--笔记
Hive的理解 数据仓库的工具 Hive仅仅是在hadoop上面包装了SQL: Hive的数据存储在hadoop上 Hive的计算由MR进行 Hive批量处理数据 Hive的特点 1 可扩展性(h ...
随机推荐
- MyEclipse10或者eclipse中配置开发Python的Pydev插件安装教程
注意使用LiClipse的用户 PyDev已经预装在LiClipse中,所以可以跳过这一步(请注意,如果使用LiClipse,PyDev不能单独安装或更新,因为它必须始终作为一个整体更新). 必需品 ...
- myeclipce项目导入eclipse中报错
1 找到新建页面所在的工程名字,然后左键选中,右键弹出功能菜单,选择Build Path,进入配置路径. 2 在java build path 页面的下选择Libraries栏目(默认选择),点击右侧 ...
- FileInputStream与FileOutputStream学习笔记
这是我的第一篇博客,纪念一下吧! 最近学习了IO流,想着学长说的话,就突然想要写写博客了,别管这是什么逻辑了,进入正题. 一.FileInputStream 1.概念 FileInputStream是 ...
- jQuery EasyUI combobox多选及赋值
1.多选属性multiple multiple:true多选 multiple:false单选 <input class="easyui-combobox" id=&qu ...
- C/C++每日小练(七)——墓地雕塑
墓地雕塑 题目描写叙述: 在一个周长为10000的圆上等距分布着n个雕塑. 如今又有m个新雕塑增加(位置能够任意放).希望全部n+m个雕塑在圆周上均匀分布.这就须要移动当中一些原有的雕塑.要求n个雕塑 ...
- BZOJ1041:[HAOI2008]圆上的整点(数论)
Description 求一个给定的圆(x^2+y^2=r^2),在圆周上有多少个点的坐标是整数. Input 只有一个正整数n,n<=2000 000 000 Output 整点个数 Samp ...
- 【转】这五种方法前四种方法只支持IE浏览器,最后一个方法支持当前主流的浏览器(火狐,IE,Chrome,Opera,Safari)
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...
- C++ 预处理器
直接上代码 1.#define 预处理 #include <iostream> using namespace std; #define PI 3.14159 int main () { ...
- 置顶博客一览表($My~Top~List$)
咳,主要是因为我觉得置顶博客太多了让人很晕233 以下是(伪)置顶的博客: 笙上月 \(\color{red}{Link}\) 笔下梅 \(\color{red}{Link}\) 老年\(OIer\) ...
- java语言基础1问题汇总
1.一个Java类文件中真的只能有一个公有类吗? 程序实验: public class test1 { public static void main( String args[] ){ } publ ...