vuex动态注册嵌套module提供模块内部组件间的数据共享

╰半夏微凉° 2022-09-13 15:21 185阅读 0赞

*vuex提供了全局性的共享数据。如果数据限于模块内共享，可以采用嵌套module，通过命名空间进行访问。*

vue开发的主角是组件。组件在代码解耦、复用、提高可读性方面立下功劳，但组件间共享数据、传递参数却很麻烦，尤其是组件嵌套层次很深的情况。如果是祖宗辈传递参数给儿孙辈还好一些，祖宗provider，儿孙inject；然而这是单向的，儿孙想更改祖宗里的这些值就难了。因为你想用 `this.$parent`，未必能找到父一辈的组件。就算能找到，`this.$parent.$parent...`这种方式也让人抓狂。

vuex就是为了解决这个问题的。其工作方式，就是所有组件都能访问、更改vuex对象里的数据。数据是共用的，有组件改了，所有组件看到的都变了。就好像在操作一个全局变量一样。

这样就会有一个问题。由于vuex提供的是全局性的数据共享机制，它的作用域是整个系统，不存在说我只在子系统内声明一个vuex对象，自己访问就好。如果我没有理解错误的话，一个系统，有且只有一个vuex对象。如果工程比较复杂，存在多个子系统，所有共享数据都放在一个vuex对象里，会很拥挤和臃肿。因此vuex提供了module，每个module都是一个store对象，并且可以嵌套。这样可以将子系统、模块的共享数据，存储进vuex对象里的相应module，区分层次。同时，module可以采取动态注册的方式，即当运行子系统或模块的时候，才注册相关module；关闭或退出子系统和模块，注销module。以下是详细说明：

## 一、创建vuex对象 ##

src/store/index.js，这是面向整个系统的

import Vue from 'vue'
    import Vuex from 'vuex'
    
    import user from './module/user'
    import app from './module/app'
    
    Vue.use(Vuex)
    
    export default new Vuex.Store({ 
      state: { 
        //
      },
      mutations: { 
        //
      },
      actions: { 
        //
      },
      modules: { 
        user,
        app
      }
    })

## 二、某模块的store module ##

某模块的store module（src/projects/dzzhyj/store.js）

const key = 'dzzhyj'
    
    export default { 
      install (_this) { 
        if (_this.$store.state[key]) { //如果module已经存在，则先注销
          $store.unregisterModule(key)
        }
    
        _this.$store.registerModule([key], { 
          /* actions 1、用于通过提交mutation改变数据 2、会默认将自身封装为一个Promise 3、可以包含任意的异步操作 mutations 1、通过提交commit改变数据 2、只是一个单纯的函数 3、不要使用异步操作，异步操作会导致变量不能追踪 */
          namespaced: true,//请注意，是namespaced！而不是namespace!这个属性与类似“dzzhyj/product/”
          modules: { 
            product: { 
              namespaced: true,
              state: { 
                v: 'hello world', // for test
                details: []
              },
              mutations: { // 同步操作
                setV (state, val) { 
                  state.v = val
                },
                setDetails (state, val) { 
                  state.details = val
                }
              },
              actions: { // 异步操作
                getV ({ state }) { 
                  return state.v
                },
                keepDetails: ({ commit }, val) => { 
                  commit('setDetails', val)
                }
              }
            }
          }
        })
      },
      uninstall (_this) { 
        _this.$store.unregisterModule([key])
      }
    }

## 三、动态注册store module ##

下图中，页签容器页、页签都是一个个独立的组件。在页签容器页（即明细信息对话框）注册，“报告”页签写入数据，“地图”页签读取数据。  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5bem55u05ouz_size_18_color_FFFFFF_t_70_g_se_x_16_pic_center]

在模块的明细信息对话框里进行注册store module（src/view/projects/dzzhyj/product/\_pop.vue）

<template>
      <div>
        <Modal v-model="modal1" :width="width" :styles="{ top: '10px' }" draggable >
    		。。。
        </Modal>
      </div>
    </template>
    
    <script>
    import myStore from '@/projects/dzzhyj/store.js'
    
    export default { 
      data () { 
        return { 
        ...
        }
      },
      created () { 
        myStore.install(this) //注册我的store module
      },
      destroyed () { 
        myStore.uninstall(this)//注销我的store module
      },
      methods: { 
      	...
      }
    }
    </script>

## 四、更改数据 ##

src/view/projects/dzzhyj/product/\_report.vue  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5bem55u05ouz_size_20_color_FFFFFF_t_70_g_se_x_16_pic_center]

<template>
      <div class="page-container">
    	“报告”页签。。。
      </div>
    </template>
    
    <script>
    export default { 
      data () { 
    	。。。
      },
      methods: { 
        keepDetails (val) { 
          //想支持这种 'dzzhyj/product/keepDetails' action，store中的namespaced = true
          this.$store.dispatch('dzzhyj/product/keepDetails', val).then(() => { 
            console.log('已缓存明细数据')
          })
        }
      }
    }
    </script>

## 五、读取数据 ##

“报告”页签的兄弟页签“地图”读取明细数据进行绘制

src/view/projects/dzzhyj/product/\_map.vue  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5bem55u05ouz_size_17_color_FFFFFF_t_70_g_se_x_16_pic_center]

<template>
      <div class="map-container">
        "地图"页签。。。
      </div>
    </template>
    
    <script>
    export default { 
      data () { 
    	。。。
      },
      methods: { 
        dyeing (details) { 
    		//地图绘制
        }
      },
      computed: { 
        getDetails () { 
          let details = null
          if (this.$store.state.dzzhyj && this.$store.state.dzzhyj.product) { 
            details = this.$store.state.dzzhyj.product.details
          }
          return details
        }
      },
      watch: { 
        getDetails (val) { 
          this.dyeing(val)
        }
      }
    }
    </script>

## 六、总结 ##

如果没有vuex，两个并列的页签组件之间，如何传递数据呢？可以将数据通过emit传给容器页，再由容器页传给另一个页签。比较麻烦，也不清晰。

vuex可以很好地解决组件间数据共享的问题。当然，如果明白vuex的原理，自己写代码实现一个store.js之类的组件也可以，但没有必要，就用vuex好了，很方便。之前见过网上一些文章都说，如果参数传递不太多，就没必要用这个vuex；甚至有人说不想用vuex。给人的感觉，就是vuex是个很庞大、笨重、复杂的东西。其实呢，vuex并不复杂，反而很好用，只是有一两个坑，避开就好。

参考文章：  
[vuex 的动态注册方法 registerModule][vuex _ registerModule]

[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5bem55u05ouz_size_18_color_FFFFFF_t_70_g_se_x_16_pic_center]: /images/20220828/23bb3ac1589e425293e14325d594fffe.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5bem55u05ouz_size_20_color_FFFFFF_t_70_g_se_x_16_pic_center]: /images/20220828/3cc1b101e9ab4cc9a310b6d51c1fcc19.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5bem55u05ouz_size_17_color_FFFFFF_t_70_g_se_x_16_pic_center]: /images/20220828/ddd7a699f02a4b74b078f54215d5571c.png
[vuex _ registerModule]: https://segmentfault.com/a/1190000019650990