[转] 对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会

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