Send an object from clientside to CEF (Vue.js) ?

[State Valentin]

Right now i'm having:

 

var alert = { type: 'danger', message: 'works!' };

 

in clientside i'm using:

browser.execute("window.app.setMessage('" + data.type + "', '" + data.message + "');");

 

because i can't use browser.execute("app.alert = " + alert);

and in vue that's a function. 

 

setMessage: function(type, message) {
      this.alert = {
        type: type,
        message: message
      }
    }

 

 

So how i'm supposed to send a object into the Vue JS ? Please help.

[Vanetti]

/**
   Vue eco system have Vuex Store

    use this module and you will be happy

    look
 * File: main.js or app.js
 * entry point of your vue app :)
 */

import Vue from 'vue';
import store from './store';
import router from './router';
import App from './App.vue';

let app = new Vue({
  router,
  store, // now store is available anywhere, into the any component and etc just like: this.$store or this.store :)
  render: h => h(App)
})

 

 

/**
 * File: store.js (CEF)
 * Source file of Vuex store
 * Here is imports of states, actions, mutations and getters
 * but you can to make it inside the Vuex.Store like
 *
 * new Vuex.Store({
 *   state: {
 *      myState: "Hello",
 *      anotherState: {
 *         moreAnotherState: {
 *            andMore: 43
 *         }
 *      }
 *   },
 *   actions: {
 *      myAction: (context, data) => context.commit("myMutation", data);
 *   },
 *   mutations: {
 *      myMutation: (state, data) => state.myState = data;
 *   },
 *   getters: {
 *      someState: (state) => {
 *        return state.anotherState.moreAnotherState.andMore
 *      }
 *   }
 * })
 */

import Vue from 'vue';
import Vuex from 'vuex';
import state from './states';
import actions from './actions';
import mutations from './mutations';
import getters from './getters';

Vue.use(Vuex);

export default new Vuex.Store({
  state,
  actions,
  mutations,
  getters
});

/**
 * file: cef.js
 * Source code of class CEF
 */

class CEF {
  constructor(pathToIndexHTML) {
    this.path = pathToIndexHTML;
    this.instance = null;
    this.state = false;
  }
  init() {
    if (this.instance === null && this.state === false) {
      this.instance = mp.browsers.new(path);
      this.state = true;
    }
  }
  destroy() {
    if (this.instance !== null && this.state === true) {
      this.instance.destoy();
      this.instance = null;
      this.state = false;
    }
  }
  exec(action, data) {
    this.instance.execute(`store.dispatch("${action}", "${payload}")`);
  }
}

 

 

now you can use something like 

CEF.exec("myAction", "FUCK YOUUUUU") // after that store.state.myState is not Hello, this is "FUCK YOUUUUU"
// and the most sweety that Vuex is reactive
// if you render store.state.myState anywhere this will be changed in the moment

 

Edited January 15, 2019 by Vanetti

[State Valentin]

Thanks for the anwser. Vue.js Store is too much for me, yet. I've learned Vue.js yesterday to create interfaces   I've found a way to do so by sending JSON into a Vue.js as a function parameter and then decoding it into a object and using it on the web application.

[Mispon]

Hi!

I use this own solution

1. On the client

/*
** Browser singleton
*/
class Browser {
    constructor() {
        if (!Browser.instance) {
            Browser.instance = this
        }
        return Browser.instance
    }

    // load browser
    load() {
        this.browser = mp.browsers.new('package://ui/index.html')
    }

    // send event with json data to UI
    triggerJson(eventName, jsonData) {
        this.browser.execute(`trigger('${eventName}', '${jsonData}')`)
    }
}

const instance = new Browser()

export default instance

2. On the UI

// Global manager in UI for handling events from client
var EventManager = {
    events: {},

    on(eventName, handler) {
        if (eventName in this.events)
            this.events[eventName].push(handler);        
        else 
            this.events[eventName] = [handler];
    }
}

// browser.execute('trigger( ... )') is this trigger
function trigger(eventName, args) {
    var handlers = EventManager.events[eventName];
    try {
        var data = JSON.parse(args);
    } catch(e) {
      	// I have handler on client if something go wrong
        mp.trigger('uiException', e.message);
    }
    handlers.forEach(handler => handler(data));
}

3. And in any vue component

export default {
    data() {
        return {
            isOpen: false,
	    name: ''
        }
    },
    methods: {
        // Show hud
        showHUD(data) {
	    // data is already parsed json object
	    this.name = data.name
	    this.isOpen = true
        }
    },
    created() {
        EventManager.on("ShowPlayerHUDEvent", this.showHUD)
    }

 

In any part of the client we just send event like this:

Browser.triggerJson('ShowPlayerHUDEvent', JSON.stringify({name: 'Vladimir Lenin', age: undefined}))

 

Edited January 19, 2019 by Mispon

[umutbicer]

On 1/15/2019 at 10:05 AM, Vanetti said:

/**
   Vue eco system have Vuex Store

    use this module and you will be happy

    look
 * File: main.js or app.js
 * entry point of your vue app :)
 */

import Vue from 'vue';
import store from './store';
import router from './router';
import App from './App.vue';

let app = new Vue({
  router,
  store, // now store is available anywhere, into the any component and etc just like: this.$store or this.store :)
  render: h => h(App)
})

 

 

/**
 * File: store.js (CEF)
 * Source file of Vuex store
 * Here is imports of states, actions, mutations and getters
 * but you can to make it inside the Vuex.Store like
 *
 * new Vuex.Store({
 *   state: {
 *      myState: "Hello",
 *      anotherState: {
 *         moreAnotherState: {
 *            andMore: 43
 *         }
 *      }
 *   },
 *   actions: {
 *      myAction: (context, data) => context.commit("myMutation", data);
 *   },
 *   mutations: {
 *      myMutation: (state, data) => state.myState = data;
 *   },
 *   getters: {
 *      someState: (state) => {
 *        return state.anotherState.moreAnotherState.andMore
 *      }
 *   }
 * })
 */

import Vue from 'vue';
import Vuex from 'vuex';
import state from './states';
import actions from './actions';
import mutations from './mutations';
import getters from './getters';

Vue.use(Vuex);

export default new Vuex.Store({
  state,
  actions,
  mutations,
  getters
});

/**
 * file: cef.js
 * Source code of class CEF
 */

class CEF {
  constructor(pathToIndexHTML) {
    this.path = pathToIndexHTML;
    this.instance = null;
    this.state = false;
  }
  init() {
    if (this.instance === null && this.state === false) {
      this.instance = mp.browsers.new(path);
      this.state = true;
    }
  }
  destroy() {
    if (this.instance !== null && this.state === true) {
      this.instance.destoy();
      this.instance = null;
      this.state = false;
    }
  }
  exec(action, data) {
    this.instance.execute(`store.dispatch("${action}", "${payload}")`);
  }
}

 

 

now you can use something like 

CEF.exec("myAction", "FUCK YOUUUUU") // after that store.state.myState is not Hello, this is "FUCK YOUUUUU"
// and the most sweety that Vuex is reactive
// if you render store.state.myState anywhere this will be changed in the moment

 

Not working  

let cef = new CEF('packages://foo/bar.html')

cef.init()

cef.exec('myAction,"foo")