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