Sign in to follow this  
State Valentin

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

Recommended Posts

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.

Share this post


Link to post
Share on other sites
/**
   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 by Vanetti

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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 by Mispon

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.