个人对vuex的表象理解(笔记)

Posted 2020-07-23 夜皇帝

一个东西，首先要知道为什么用它，为什么要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会

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