How to use the riot.mixin function in riot

beforeAll( () => {
        expect(mockFn.mock.calls.length).toBe(0);
        riot.mixin('messageMixin', messageMixin);
        // create mounting point 
        const elem = document.createElement('div');
        elem.className = "main-body";
        document.body.appendChild(elem)
        riot.mount(elem, {}, pageone);
    });

route('users/*', (screenName) =>
		changePage('user', { screenName }));

	route('posts/*', (postId) =>
		changePage('post', { postId }));

	route('*', () =>
		changePage('error', { message: 'page not found' }));

	loadTags();

	await waitRecaptcha(mixin.siteKey);

	// mount riot tags
	riot.mixin(mixin);
	riot.mount('*');

	route.start(true);

	// NOTE: move to error page by content of error metaData only when initialization
	if (mixin.error != null) {
		changePage('error');
	}
	// NOTE: move to target page by content of page metadata only when initialization
	else if (mixin.page != null) {
		changePage(mixin.page);
	}

})().catch(err => {
	console.log('何かがおかしいよ');

let query = {}
      query[key] = value
      store.set(query, cb)
    }

    // get
    this.get = function (key, cb) {
      store.get(key, function (response) {
        cb(response[key])
      })
    }
  }
}

// make all components storage mixins
riot.mixin(StorageMixin)

import './components.tag'

// initialize the view model
let sections = [{
  title: 'General settings',
  icon: 'cog',
  options: [{
    id: 'open-in-background',
    description: 'Open email tab in background',
    value: true
  }]
}]

import providers from '../js/providers'

var riotxChange = function (store, evtName, handler) {
    var args = [], len = arguments.length - 3;
    while ( len-- > 0 ) args[ len ] = arguments[ len + 3 ];

    this._riotx_change_handlers.push({
      store: store,
      evtName: evtName,
      handler: handler
    });
    args.unshift(handler);
    args.unshift(evtName);
    store.change.apply(store, args);
  };

  // register a mixin globally.
  riot.mixin({
    // intendedly use `function`.
    // switch the context of `this` from `riotx` to `riot tag instance`.
    init: function () {
      var this$1 = this;

      // the context of `this` will be equal to riot tag instant.
      this.on('unmount', function () {
        this$1.off('*');
        forEach_1(this$1._riotx_change_handlers, function (obj) {
          obj.store.off(obj.evtName, obj.handler);
        });
        delete this$1.riotx;
        delete this$1._riotx_change_handlers;
        delete this$1[settings.changeBindName];
      });

* function to stop listening for the changes.
     * to stop, just execute this function.
     * @private
     * @type {Function|null}
     */
    this._unlistener = null;

    /**
     * function to unblock the navigation.
     * to unblock, just execute this function.
     * @type {Function|null}
     */
    this._unblocker = null;

    // make children act as page.
    riot.mixin({
      init: function () {
        const isPage = (this.parent && this.parent.isRoute);
        if (!isPage) {
          return;
        }
        this.routeInfo = this.parent.routeInfo;
      }
    });
  }

import { mixin } from 'riot'

// add special animation features to the current tag instance
mixin('animation-features', {
  features: { Velocity },
  defaultTransitions: {
    in: 'transition.slideUpIn',
    out: 'transition.slideUpOut'
  },
  moveIn: function (el) {
    return Velocity(el, this.defaultTransitions.in)
  },
  moveOut: function (el) {
    return Velocity(el, this.defaultTransitions.out)
  }
})

function handler(collection, id, action) {

    if (!Riot.mixin('peoplelistObservable')) {
        Riot.mixin('peoplelistObservable', new PeoplelistObservable());
    }

    if (currentPage) {
        currentPage.unmount(true)
    }

    var fn = routes[collection || 'home'];
    return fn ? fn(id, action) : console.error('no route found : ', collection, id, action);
}

method: 'get', endpoint: `/users/${userId}`,
							headers: {'x-api-version': 1.0},
						}
					});
				});
			});

			await readyAsync();
		}
	}
	catch (err) {
		console.log('何かがおかしいよ');
		console.dir(err);
	}

	riot.mixin(mixinGlobal);
	riot.mount('*');
})();

function handler(collection, id, action) {

    if (!Riot.mixin('peoplelistObservable')) {
        Riot.mixin('peoplelistObservable', new PeoplelistObservable());
    }

    if (currentPage) {
        currentPage.unmount(true)
    }

    var fn = routes[collection || 'home'];
    return fn ? fn(id, action) : console.error('no route found : ', collection, id, action);
}

},

	trackSelector(selector, target) {
		this.onSelectorUpdate(selector, function(state) {
			_.set(this, target, state);
			this.update();
		}.bind(this));
		_.set(this, target, selector(store.getState()));
	},

	storeStateChanged(previous, current) {
		return previous !== current;
	}
}

riot.mixin('store', StoreMixin);