[转] 对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,这个文件的目的是申明整个项目存在的事件有哪些。。。代码如下

1
2
3
export const PLUS = 'PLUS'
export const MINS = 'MINS'
//本例就是两个事件,

接着新建actions文件夹,然后建三个js文件,分别为plus和mins对应的函数操作,以及总的actions文件

代码如下(由于两者相似,以plus为例):

 

1
2
3
4
5
<em><strong>import {PLUS} from '../mutation-type'<br>export const plus = ({dispatch}, num) => {
 
    dispatch(PLUS,</strong> num)
}</em>
意思就是我这里是处理plus的,所以我先把我事件类型里的那个plus导入过来,对组件提供一个plus函数作为接口,这个函数是进行一个plus事件的dispatch操作,所以肯定第一个参数是<br>dispatch,这里函数名可以任何名字,<br>只要与你对应组件里名字对应即可,如果组件里面传的是this,则参数可以直接进行dom操作,用法,num.$el直接获取该组件的dom节点

总的action文件代码如下:

1
2
3
import {del} from './actions/mins'
import {plus} from './actions/plus'
export {del,plus}

ok,现在action有了,开始对应的组件,分别plus,mins,display,以及根app,由于mins和plus相似,所以二者只写一个plus;

plus代码如下

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<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组件代码如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<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,很容易理解,因为我获取的是状态,<br>也就是如果你直接写(plus)的话,就必须写成(plus)=》plus.plus.num
                 mynum:({mins})=>mins.num
 
            }
        }
    }
</script>
注意,如果写了getter继续写data的话,则getter无效,官网上也专门写过getter函数,就是封装相应值得处理

  app代码如下

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<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><br>我要随时要监听状态吧,那得在对应模块的根目录上有个状态位吧,所以这里写store,这里有了之后,子组件会自动接收,相当于完成一个类似向下广播和监听的作用

接着是plus的mutations文件代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
import {PLUS} from '../mutation-type'
 
const state = {
    num: 0
}
const mutations={
    PLUS(state,num){//注意这官网是[PLUS],但是把中括号去掉也是可以,效过没区别,这是因为你mutations-type里面const A =‘A’,变量常量是一样的,如果这里const A= bb这时候这里的<br>[]就有作用了,类似变量匹配的意思;
        state.num=state.num+num
    }
}
export default {
    state,
    mutations
}
这段意思大概是现在actions已经触发了,dispatch了plus事件,我得有个监听处理吧,这的
mutation就是监听对应的时间相当于之前的event选项;你要处理所以第一个参数肯定是state状态啊,第二个就是对应事件传的参数,对外传一个状态和处理函数

 然后各个零件汇总得到store.js代码如下

 

1
2
3
4
5
6
7
8
9
10
11
12
13
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会

当然这只是理解入门,更深一步操作,还需要各位慢慢琢磨,认识具有反复性和无限性,呵呵

posted @ 2017-03-15 01:14  {前端开发}  阅读(302)  评论(0编辑  收藏  举报