In practice, there are many scenarios that require the user to transfer the data back to the previous page after the operation on the second page. Next, I will share my plan with my friends.

This example uses the UNI-App framework and weUI style library

Implementation approach

  1. To create aEmitterFor event handling
  2. Create a globalStorage
  3. Create one on the first pageemitterObject, and add event listener, willemitterStored in theStorage 中
  4. On the second page fromStorageRemove theemitterObject, and triggers an event that passes the data to the first page for processing

createEmitter

function isFunc(fn) {
  return typeof fn === 'function';
}

export default class Emitter {
  constructor() {
    this._store = {};
  }

  /** * @param {String} event name * @param {Function} listener Event callback Function */
  on(event, listener) {
    const listeners = this._store[event] || (this._store[event] = []);

    listeners.push(listener);
  }

  @param {String} Event event name * @param {Function} listener Event callback Function */
  off(event, listener) {
    const listeners = this._store[event] || (this._store[event] = []);

    listeners.splice(listeners.findIndex(item= > item === listener), 1);
  }

  @param {String} Event Event name * @param {Function} listener Event callback Function */
  once(event, listener) {
    const proxyListener = (data) = > {
      isFunc(listener) && listener.call(null, data);

      this.off(event, proxyListener);
    }

    this.on(event, proxyListener);
  }

  /** * @param {String} Event name * @param {Object} parameters passed to the event callback function */
  emit(event, data) {
    const listeners = this._store[event] || (this._store[event] = []);

    for (const listener of listeners) {
      isFunc(listener) && listener.call(null, data); }}}Copy the code

createStorage

export class Storage {
  constructor() {
    this._store = {};
  }

  add(key, val) {
    this._store[key] = val;
  }
  
  get(key) {
    return this._store[key];
  }
  
  remove(key) {
    delete this._store[key];
  }
  
  clear() {
    this._store = {}; }}export default new Storage();

Copy the code

Processing in the first page

<template>
  <div class="page">
    <div class="weui-cells__title">Select the city</div>
    <div class="weui-cells weui-cells_after-title">
      <navigator :url="`.. /select/select? id=${cityId}`" class="weui-cell weui-cell_access" hover-class="weui-cell_active">
        <div class="weui-cell__hd weui-label">city</div>
        <div class="weui-cell__bd" :style="{color: cityName || '#999'}">{{cityName | | 'please select'}}</div>
        <div class="weui-cell__ft weui-cell__ft_in-access"></div>
      </navigator>
    </div>
  </div>
</template>

<script>
import Emitter from '.. /.. /utils/emitter';
import storage from '.. /.. /utils/storage';

export default {
  data() {
    return {
      cityId: ' '.cityName: ' ',
    }
  },
  onLoad() {
    const emitter = new Emitter();

    // Put emitter into storage
    storage.add('indexEmitter', emitter);

    // Add event listener
    emitter.on('onSelect'.this.handleSelect);
  },
  methods: {
    // Event processing
    handleSelect(data) {
      this.cityId = data.id;
      this.cityName = data.text; }}}</script>

Copy the code

Processing in the second page

<template>
  <div class="page">
    <div class="weui-cells__title"> City list </div> <div class="weui-cells weui-cells_after-title">
      <radio-group @change="handleChange">
        <label class="weui-cell weui-check__label" v-for="item in list" :key="item.id">
          <radio class="weui-check" :value="item.id" :checked="`${item.id}` === selectedId" />
          <div class="weui-cell__bd">{{ item.text }}</div>
          <div v-if="`${item.id}` === selectedId" class="weui-cell__ft weui-cell__ft_in-radio">
            <icon class="weui-icon-radio" type="success_no_circle" size="16" />
          </div>
        </label>
      </radio-group>
    </div>
  </div>
</template>

<script>
import storage from '.. /.. /utils/storage';

export default {
  data() {
    return {
      list: [
        { id: 0, text: 'Beijing' },
        { id: 1, text: 'Shanghai' },
        { id: 2, text: 'guangzhou' },
        { id: 3, text: 'shenzhen' },
        { id: 4, text: 'hangzhou' },
      ],
      selectedId: ' '} }, onLoad({ id }) { this.selectedId = id; // Emitter this. Emitter = storage.'indexEmitter');
  },
  methods: {
    handleChange(e) {
      this.selectedId = e.detail.value;

      const item = this.list.find(({ id }) => `${id}` === e.detail.value); // Firing events and passing data this.emitter. Emit ('onSelect', { ...item });
    }
  }
}
</script>

Copy the code

Results show

portal

github

conclusion

Storage is defined as global to ensure that the first page placed in Storage is the same instance as the emitter taken out of Storage by the second page, so that the first page can correctly listen to the events triggered by the second page. You can also use Vuex to put Emitter in state.