web前端高级VUE - vuex中的state/mutations/actions/modules/getters的基本解析及基于代码分析vuex的原理

浅浅的花香味﹌ 2022-12-30 08:29 233阅读 0赞

### vuex ###

*  state

>  *  用于存放组件间互相通信的属性值。
>  *  原则上state中的属性只能在各个组件之间使用，而不能修改，如果要修改需要在mutations中修改

*  mutations

>  *  这里存放的都是一些函数，用于修改state中的属性值
>  *  这里的函数中只接收两个参数：state和options
>  *  原则上这里面的函数必须都是同步的
>  *  如果某组件中需要修改state中的属性值，则需在该组件中用this.$store.commit(‘方法名’, 参数)的方式来调用，即需要用commit方法来调用mutations中的函数
>  *  **通过commit触发**

*  actions

>  *  这里存放的也都是一些函数，这里的函数可以是异步的
>  *  这里的函数也是接收两个参数：store和options
>  *  如果这里的函数想要修改state中的值，还是得通过调用mutations中的方法来实现
>  *  如果想要在组件中调用这里的函数，则需要用dispatch方法调用：this.$store.dispatch(‘方法名’, options)
>  *  **通过dispatch触发**

*  getters

>  *  这里也是一些函数，类似于组件中的计算属性
>  *  可以处理一些通用且复杂的逻辑， 实际使用比较少

*  modules

>  *  用于划分模块
>  *  由于使用单一状态树，应用的所有状态会集中到一个比较大的对象。当应用变得非常复杂时，store对象显得会相当臃肿
>  *  为了解决上面的问题，Vuex允许将store分割成模块。每个模块拥有自己的state、mutation、action、getter甚至是嵌套子模块
>  *  如果模块中的mutations或actions重复，则两个重复的方法都会执行
>  *  如果想区分模块中重复的mutations或actions，则可以在模块中加一个属性：namespace:true即可，调用时需要指定模块名，例如：this.$store.commit(‘模块名/方法名’)

*  一次性引入多个模块

import a from './modules/a.js'
    import b from './modules/b.js'
    import c from './modules/c.js'
    import d from './modules/d.js'
    import e from './modules/e.js'
    //可以用下面的方法来替换上面的导入
    const requireComponent = require.context('./modules', false, /\.js$/);
    requireComponent.keys().forEach(item => { 
    	let obj = requireComponent(item).default;
    	Vue.component(obj.name, obj);//这句代码可以将组件注册为全局组件
    });

*  基于vuex的原理重写部分Vuex源码