rootComponent in v7?

[Tim]

Build many apps with Framework7 v5, and currently building the first one with v7. One thing I can’t figure out, is how to have ‘global’ app helper methods. For example a logout method. In v5 I had methods like logout or helper methods for custom dialogs in app methods parameter or in root component methods:

return {
  methods: {
    logout: function() {
      ...
    }
  }
}

And I could call it from other components like this: this.$app.rootComponent.logout()

What is a best-practise for where to place global methods in v7? App initialization parameters don’t seem to exist anymore and I can’t figure out how to access methods in root component (single file component).

[deejay]

using store:

let app = new Framework7({
//store: Framework7.createStore({
  store: { // not reactive
    state: {
      logger: (v) => console.log(v),
      dialog: (v) => app.dialog.alert(v)
    }
  }//)
});

app.store.state.logger('value');
app.store.state.dialog('value');

Store | Framework7 Documentation

using plugin:

Framework7.use({
  create() {
    this.utils.extend(this,{
      methods: {
        logger: (v) => console.log(v),
        dialog: (v) => this.dialog.alert(v)
      }
    });
  }
});

let app = new Framework7({ /* params */ });

app.methods.logger('value');
app.methods.dialog('value');

Framework7 Plugins API | Framework7 Documentation

[Tim]

Great examples, thanks! Was indeed experimenting with using the store dispatch methods, but it felt like these were more meant for data-related items using the store contents. Seems to be good enough for now then

[deejay]

store (getters-state) is reactive.
if you dont need reactive-state then use the plugin

[Tim]

Still busy getting used to the new workflow, by using store dispatch methods and ‘responsive’ template literals. (F7 core)

My store.js starts to look like this. Although everything works like a charm, I’m wondering if this is the right way because I have to create setters for every state property I want to use somewhere.

And then in my app component I am for example using the getters.profile.value to check if a profile is selected:

[deejay]

@Tim

I have to create setters for every state property I want to use somewhere

not really
it depends in your state structure