Add global reactive setting to an F7 page

Questions
1

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).

      <f7-list-input
        label="Name"
        type="text"
        placeholder="Your name"
        :value="$data.username"
        @input="$data.username = $event.target.value"
      ></f7-list-input>

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
  },
});
2

I use vuex to manage my state.

https://vuex.vuejs.org/

3

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)

4

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

      <f7-list-input
        label="E-mail"
        type="email"
        placeholder="E-mail"
        :value="$f7.data.settings.name"
        @input="$f7.data.settings.name = $event.target.value"
        @changed="$f7.data.settings.name = $event.target.value"
      ></f7-list-input>
5

Vuex is a reactive state manager. But ok.

<f7-list-input
        label="Name"
        type="text"
        placeholder="Your name"
        :value="Vuex Getter"
        @input="Vuex Mutation/Action"
      ></f7-list-input>
6

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

7

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

8

I already posted a solution

9

To be honest didn’t know that $f7.data 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

10

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