Add global reactive setting to an F7 page

Im just playing with the new F7 cli and there’s one question:
I created a project PWA & Cordova.

Now, I want to have some global reactive settings, but if I add them to data() in app.vue, and want to bind the username (or whatever) to an input field, that doesn’t work (because the page is compiled before $data becomes available).

        placeholder="Your name"
        @input="$data.username = $"

How can I add this reactively to e.g. the settings-page?
The only option - it seems - is, to add a data to the Vue instance itself and access via $root:

const vue = new Vue({
  el: '#app',
  data: {
    username: "John Doe",
    settings: {
      name: "Some other name" // access via $root.settings
  render: (h) => h(App),

  // Register App Component
  components: {
    app: App

I use vuex to manage my state.

that’s good for you - but that was neither my question, nor does it answer anything (the question has nothing to do with states, but reactivity)

However, if I put the keys into f7params, it works:

        @input="$ = $"
        @changed="$ = $"

Vuex is a reactive state manager. But ok.

        placeholder="Your name"
        :value="Vuex Getter"
        @input="Vuex Mutation/Action"

But my question was not about Vuex and state-management (because I don’t need the state, but access the property directly)

i didn’t say it was your solution, just suggesting a way to access to them. Maybe you need another solution.

I already posted a solution

To be honest didn’t know that $ becomes reactive, this is probably Vue’s side effect rather than predictive behavior. I would suggest to move global reactive data to root component data and access it as $root, at least this is what is supported and recommended

Ha - great… I was pulling my head, because I didn’t understand that…
And I will take your advice and put it under $root

1 Like