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

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)

.└── 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.jsimport Vue from 'vue'import Vuex from 'vuex'
Vue.use(Vuex)export const store = new Vuex.Store({  // 状态数据  state() {    return {}  },  getters: {},  mutations: {},  actions: {},})

// App.vueimport { store } from './store'
new Vue({  // 注入 store  // 在所有的改 Vue 管理的 vue 对象中都可以通过 this.$store 来获取  store,})

// store-mixn.jsexport 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// 当前组件自有storeexport default {  // 组件自身的状态  state() {    return {}  },  mutations: {},  getters: {},  //...other things}
// code.vue// 组件对外的入口模块import store from './store'export default {  mixins: [StoreMixin(/*namespace*/ 'hello', /* 组件的 store */ store)],}

// gen.js// 生成唯一的 namespaceconst g = window || globalg.__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)}

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

// code.vueexport 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 */    ]),  },}

// store-mixn.jsexport default function StoreMixin(ns, store) {  return beforeCreate() {    // 保证 namespace 唯一性    const namespace = gen(ns)    // 将重命名后的 namespace 挂载到当前 vue 对象的$ns 属性上    this.$ns = namespace    //...  }}

// code.vueexport 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 */    ]),  },}

// code.vueimport { 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.jsVue.use(injectNamespace);

// code.vueexport 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>