悟空活动中台：微组件状态管理（上）

通过不断的深入思考问题，探索现象背后的本质原理，从架构设计层面上很好的解决了组件在不同的场景上下文中的连接（状态管理）。例如：

• 在活动页内，我们解决了 RSC 组件与组件之间的连接。
• 在平台内，我们解决了 RSC 组件和平台之间的连接。业务上 RSC 组件需要感知到平台的关键动作，如活动保存，编辑器内组件删除等。
• 在编辑器内的安全沙盒中，我们解决了组件和跨沙盒的配置面板之间的连接。

const vm = new Vue()

// 注册订阅者

vm.$on('event-name', (payload) => {/*执行业务逻辑*/})

// 注册订阅者，执行一次后自动取消订阅者

vm.$once('some-event-name', (payload) => {/*执行业务逻辑*/})

// 取消某事件的某个订阅者

vm.$off('event-name'，[callback])

// 通知各个订阅者执行相对应的业务逻辑

vm.$emit('event-name'，payload)

（滑动可查看）

在实践中发现基于 EventBus 的数据状态管理模式的优点：

• 代码的实现比较简单，设计方案容易理解
• 很轻量的方式就可以完成组件之间的解耦，将组件之间的强耦合变成对 EventBus 的弱耦合。

Vuex 是一个通用状态管理框架，怎么无缝融入到我们的 RSC 组件体系中呢？我们需要在项目中引入对 Vuex 的依赖和支持，在顶层的 Vue 中添加对 store 的依赖。
我们项目的基本结构：

.

└── src

    ├── App.vue

    ├── app.less

    ├── assets

    ├── component

    ├── directive

    ├── main.js

    ├── stat

    ├── store

    └── utils

├── babel.config.js

├── package.json

├── public

{

  "dependencies": {

    "vuex": "^3.0.1"

  }

}

//store/index.js

import Vue from 'vue'

import Vuex from 'vuex'




Vue.use(Vuex)

export const store = new Vuex.Store({

  // 状态数据

  state() {

    return {}

  },

  getters: {},

  mutations: {},

  actions: {},

})

（滑动可查看）

// App.vue

import { store } from './store'




new Vue({

  // 注入 store

  // 在所有的改 Vue 管理的 vue 对象中都可以通过 this.$store 来获取

  store,

})

（滑动可查看）

可以通过抽取公共 StoreMixin 来简化这一过程，还可以自动开启 namespaced: true 和针对当前的命名空间扩展快捷方法和属性。代码如下：

// store-mixn.js

export default function StoreMixin(ns, store) {

  return beforeCreate() {

    // 保证 namespace 唯一性

    // 开发者可以通过函数生成唯一的namespace

    // 框架可以生成唯一的namespace

    const namespace = isFn(ns) ? ns(this) : gen(ns)

    this.$ns = namespace

    store.namespaced = true

    this.$store.registerModule(namespace, store)




    // 扩展快捷方法和属性

    this.$state = this.$store.state[namespace]

    this.$dispatch = (action, payload) =>

      this.$store.dispatch(`${namespace}/${action}`, payload)

    this.$getter = //...

    this.$commit = //...

  }

}

（滑动可查看）

//store.js

// 当前组件自有store

export default {

  // 组件自身的状态

  state() {

    return {}

  },

  mutations: {},

  getters: {},

  //...other things

}




// code.vue

// 组件对外的入口模块

import store from './store'

export default {

  mixins: [StoreMixin(/*namespace*/ 'hello', /* 组件的 store */ store)],

}

（滑动可查看）

// gen.js

// 生成唯一的 namespace

const g = window || global

g.__namespaceCache__ = g.__namespaceCache__ || {}




/**

 * 生成唯一的 moduleName, 同名 name 默认自动增长

 * @param {*} name

 */

export default function genUniqueNamespace(name) {

  let cache = g.__namespaceCache__

  if (cache[name]) {

    cache[name].count += 1

  } else {

    cache[name] = {

      count: 0,

    }

  }

  return name + (cache[name].count === 0 ? '' : cache[name].count)

}

（滑动可查看）

另外，开发者可以通过 store-mixin 中传递自定义函数来生成唯一的 namespace 标识。比如，如下代码，根据 vue-router 中的路由动态参数来设置 namespace

export default {

  mixins: [StoreMixin((vm) => vm.$router.params.spuId), store],

}

（滑动可查看）

// code.vue

export default {

  mixins: [StoreMixin('hello', store)],

  computed: {

    ...mapGetters('hello', [

      /* hello namespace store getter */

    ]),

    ...mapState('hello', [

      /* hello namespace state property */

    ]),

  },

  methods: {

    ...mapActions('hello', [

      /* hello namespace actions method */

    ]),

    ...mapMutations('hello', [

      /* hello namespace mutations method */

    ]),

  },

}

（滑动可查看）

怎么解决 Vuex mapXXX 方法中动态 namespace 的问题？首先我们我们想到的是在 StoreMixin 中将 namespace 设置在 Vue 的 this.$ns 对象上，这样被 StoreMixin 混入的组件就就可以动态获取 namespace 。

// store-mixn.js

export default function StoreMixin(ns, store) {

  return beforeCreate() {

    // 保证 namespace 唯一性

    const namespace = gen(ns)

    // 将重命名后的 namespace 挂载到当前 vue 对象的$ns 属性上

    this.$ns = namespace

    //...

  }

}

（滑动可查看）

虽然我们可以在组件内通过 this.$ns 获取组件中的 store 的命名空间，假想着我们可以：

// code.vue

export default {

  computed: {

    ...mapGetter(this.$ns, [

      /* hello namespace store getter */

    ]),

    ...mapState(this.$ns, [

      /* hello namespace state property */

    ]),

  },

  methods: {

    ...mapActions(this.$ns, [

      /* hello namespace actions method */

    ]),

    ...mapMutations(this.$ns, [

      /* hello namespace mutations method */

    ]),

  },

}

（滑动可查看）

很遗憾，在这个时刻 this 根本就不是当前 Vue 的实例，this.$ns 华丽丽的 undefined。那怎么办呢？JS 有很多函数式编程的特点，函数也是值，可以作为参数等进行传递，其实函数除了具有值特性外还有一个很重要的特性就是 lazy computed 惰性计算。基于这样的思考，对 mapXX 方法进行扩展，支持动态的 namespace 。然后在 mapXXX 方法中，等到 vm 是当前 Vue 的组件实例时，才去获取当前的组件的 namespace 。

// code.vue

import { mapGetters, mapState, mapActions, mapMutations } from 'vuex-helper-ext'




export default {

  computed: {

    ...mapGetters((vm) => vm.$ns, [

      /* hello namespace store getter */

    ]),

    ...mapState((vm) => vm.$ns, [

      /* hello namespace state property */

    ]),

  },

  methods: {

    ...mapActions((vm) => vm.$ns, [

      /* hello namespace actions method */

    ]),

    ...mapMutations((vm) => vm.$ns, [

      /* hello namespace mutations method */

    ]),

  },

}

（滑动可查看）

function injectNamespace(Vue) {

  Vue.mixin({

    beforeCreate: function _injectNamespace() {

      const popts = this.$options.parent;

      if (popts && popts.$ns) {

        this.$ns = popts.$ns;

        const namespace = this.$ns;




        // 为组件扩展快捷方法和属性

        this.$state = this.$store.state[namespace]

        this.$dispatch = (action, payload) =>

                            this.$store.dispatch(`${namespace}/${action}`, payload)

        this.$getter = //...

        this.$commit = //...

      }

    }

  });

}

// main.js

Vue.use(injectNamespace);

（滑动可查看）

// code.vue

export default {

  computed: {

    ...mapGetter([

      /* hello namespace store getter */

    ]),

    ...mapState([

      /* hello namespace state property */

    ]),

  },

  methods: {

    ...mapActions([

      /* hello namespace actions method */

    ]),

    ...mapMutations([

      /* hello namespace mutations method */

    ]),

  },

}

（滑动可查看）

export default {

  state() {

    return { mott: 'hello vue' }

  },

  mutations: {

    changeMott(state) {

      state.mott = 'hello vuex'

    },

  },

}

（滑动可查看）

<template>

  <div @click="changeMott">{{ mott }}</div>

</template>

<script>

import { mapState, mapMutations } from 'vuex-helper-ext'

export default {

  computed: {

    ...mapState(['mott']),

  },

  methods: {

    ...mapMutations(['changeMott']),

  },

}

</script>

<tempalte>

  <text></text>

</template>

<script>

import store from './store';

import text from './text';




export default {

  mixins: [StoreMixin('hello', store)],

  components: {

    text

  },

  methods: {

    // ....

  }

}

</script>

（滑动可查看）