一个东西,首先要知道为什么用它,为什么要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的表象理解(笔记)的更多相关文章

  1. [转] 对vuex的表象理解(笔记)

    一个东西,首先要知道为什么用它,为什么要vuex,官方解释为了解决繁杂事件订阅和广播,那么事件的$dispatch,$on,怎么就复杂了?许多人是不是感觉后者还挺简单的,对的 如果简单小型项目,那么不 ...

  2. batch normalization学习理解笔记

    batch normalization学习理解笔记 最近在Andrew Ng课程中学到了Batch Normalization相关内容,通过查阅资料和原始paper,基本上弄懂了一些算法的细节部分,现 ...

  3. 深度学习-InfoGAN论文理解笔记

    在弄清楚InfoGAN之前,可以先理解一下变分推断目的以及在概率论中的应用与ELBO是什么,以及KL散度 https://blog.csdn.net/qy20115549/article/detail ...

  4. vuex的简单理解

    初次接触vuex,谈谈我自己的理解.有待后期改进 首先要知道,Vuex 是专门为 Vue.js 设计的状态管理库.我们知道在用vue.js进行前端项目开发时,会出现很多组件相互之间调用属性.状态,小项 ...

  5. cookie&&session再理解笔记

    就拿php来说,两个php页面之间不拿get,post传递变量的话,数据是不能共享的.访问完1.php页面该页面的变量就被销毁了.所以就拿学校食堂来说,拿现金买饭的话你交完钱后,他给你个票以便确认你, ...

  6. bundle的理解笔记

    Bundle是一个键值对这样一个东西.就是一个string类型的东西,对应任何类型的东西.就是用来存值的. 这里可以看到他的作用 public void onClick(View v) { Strin ...

  7. 对socket的一点理解笔记

    需要学web service,但是在视频中讲解到了socket套接字编程.以前貌似课上老师有提过,只是没用到也感觉乏味.现在遇到,自己看了些博客和资料.记录一点理解,不知正确与否. 首先说这个名字,叫 ...

  8. JMS学习的个人理解笔记

    Jms即java消息服务javamessage service,所谓的面向消息编程,主要应用在企业内部各个系统之间做接口,以异步方式传递消息数据. Jms有2种传送模式,先来看第一种,即点对点传送模式 ...

  9. hive的简单理解--笔记

    Hive的理解 数据仓库的工具  Hive仅仅是在hadoop上面包装了SQL: Hive的数据存储在hadoop上 Hive的计算由MR进行 Hive批量处理数据  Hive的特点 1 可扩展性(h ...

随机推荐

  1. 基于Python的频谱分析(一)

    1.傅里叶变换  傅里叶变换是信号领域沟通时域和频域的桥梁,在频域里可以更方便的进行一些分析.傅里叶主要针对的是平稳信号的频率特性分析,简单说就是具有一定周期性的信号,因为傅里叶变换采取的是有限取样的 ...

  2. MyEclipse10或者eclipse中配置开发Python的Pydev插件安装教程

    注意使用LiClipse的用户 PyDev已经预装在LiClipse中,所以可以跳过这一步(请注意,如果使用LiClipse,PyDev不能单独安装或更新,因为它必须始终作为一个整体更新). 必需品 ...

  3. WampServer 安装使用详解

    WampServer集成环境的搭建.安装.使用.配置 什么是WampServer WampServer是一款由法国人开发的Apache Web服务器.PHP解释器以及MySQL数据库的整合软件包.免去 ...

  4. VM虚拟机打不开,没有反应,解决方法。

    最近的项目开发,需要用到虚拟机,但是打开虚拟机VM8却发现,以前创建的虚拟机都用不了,点击左侧[我的计算机]中的虚拟机列表,没有任何反应,也没有任何错误提示,服务中所有的虚拟机服务都开启了,网上百度没 ...

  5. emWin及StemWin使用中关于菜单栏的应用与问题

    前言:在我看来,emWin和StemWin就是基本相同的库文件,关于这个库文件的移植,网络上有很多教材,比如“ALIENTEK emWin开发手册”,他们家提供了各种STM32系列的开发手册,我这里记 ...

  6. Sudoku(第二次作业)

    这里是github 工具清单: 编程语言:C++ 编程IDE:XCode 效能分析工具:XCode 源代码管理平台:Github PSP2.1 PSP2.1 Personal Software Pro ...

  7. 【转】ICCAVR TAB键设置

    转载于: http://blog.163.com/liuyunqian@yeah/blog/static/7039584320099159545292/ 在使用ICCAVR C编译器的时候会发现TAB ...

  8. 【转】一个域名是用哪里的DNS来解析的,电脑怎么知道找哪一个DNS呢? 我注册域名的时候会在服务商那里配置DNS解析,一般需要24小时后才能访问,我想知道,解析后的这个数据是不是会同步到世界上所有的DNS服务器呢!如果不是,当我访问我的这个域名的时候,电脑怎么知道去找到我注册的这一家的DNS服务器呢,谁告诉他的呢?

    看看DNS一些基础知识,你就了解了.1.DNS就是域名服务器,他的任务就是确定域名的解析,比如A记录MX记录等等. 2.任何域名都至少有一个DNS,一般是2个.为什么要2个以上呢?因为DNS可以轮回处 ...

  9. 堆-STL

    往堆中加一个元素的算法(put): #include<algorithm> void put (int d) { heap[++heap_size]=d; push_heap(heap+, ...

  10. webpack2 项目构建一

    最近工作忙,学习被暂停了,还是网上多看看资料,多学习学习一下,看到一些好的资料,自己想整理一下,这不,webpack2项目构建都还没有弄懂,webpack3就已经发布了,说实话周末现在真不想看书和研究 ...