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

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

• 在活动页内，我们解决了 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

//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'
    },
  },
}

（滑动可查看）

<tempalte>
  <text></text>
</template>
<script>
import store from './store';
import text from './text';

export default {
  mixins: [StoreMixin('hello', store)],
  components: {
    text
  },
  methods: {
    // ....
  }
}
</script>

（滑动可查看）