[转] 对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会
当然这只是理解入门，更深一步操作，还需要各位慢慢琢磨，认识具有反复性和无限性，呵呵
