No More Posting New Topics!

If you have a question or an issue, please start a thread in our Github Discussions Forum.
This forum is closed for new threads/ topics.

Navigation

    Quasar Framework

    • Login
    • Search
    • Categories
    • Recent
    • Tags
    • Popular
    • Users
    • Groups
    • Search

    Quasar + Vuex

    Show & Tell
    7
    14
    8827
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • Martin
      Martin last edited by

      I’ve been deep diving into Vuex and built a Quasar sample app based on this article.
      https://coligo.io/learn-vuex-by-building-notes-app/

      Link:
      git clone https://github.com/beebase/learn-vuex-by-building-notes-app.git

      0_1485356309797_upload-1f3243de-ae64-4d07-9e27-d20ce20eb3e1

      The code in the article is outdated so I’ve used latest syntax for
      Quasar 0.12
      Vuex ^2.1.1
      Vue ^ 2.1.10

      The solution demonstrates vuex basics with a todo list.
      Vuex is very cool. Once you know the pattern, it’s basically re using it over and over again.
      And it feels very organised. Here’s a sample of that pattern.
      0_1485356429433_upload-e33fe274-7ad9-4bf4-8d8f-71d9ae8c2211

      And it’s VERY cool how vue-dev-tools in Chrome keeps track of all the states that vuex goes through.
      0_1485357001911_upload-e287018b-77e9-4402-b7ed-3c01fa749a2b

      1 Reply Last reply Reply Quote 5
      • s.molinari
        s.molinari last edited by

        Yup. Vuex is pretty cool. It makes reasoning about your data a lot simpler.

        Scott

        1 Reply Last reply Reply Quote 0
        • rstoenescu
          rstoenescu Admin last edited by

          Excellent post, Martin!

          1 Reply Last reply Reply Quote 0
          • Jon
            Jon last edited by

            The first pic in particular is worth its weight in gold.

            Martin 1 Reply Last reply Reply Quote 1
            • Martin
              Martin @Jon last edited by

              @Jon I was hoping so! It always surprises me why there’s never such a “mental picture” shown, when reading articles about vuex, redux etc…
              Describing it in words makes it way too complicated.

              Jon 1 Reply Last reply Reply Quote 1
              • Jon
                Jon @Martin last edited by

                @Martin Of course, I’ve just realised the weight of a .png is negligible 🙂

                Nonetheless, I’ve printed it and pinned it on the wall above my monitor for easy reference as I’m about to dive into Vuex and AXIOS (god help me)

                1 Reply Last reply Reply Quote 1
                • D
                  Diferno last edited by

                  Hi!
                  I’m just starting with Vuex + Quasar and find it awsome so far.

                  But I have a question buzzing me:
                  My backend is Restify and Rethinkdb as DB.

                  Can anyone point me the right way of updating the store when a new product has been inserted in the DB ? Doing a massive fetch doesn’t sound very reactive to me
                  😞

                  Thx in advance!

                  1 Reply Last reply Reply Quote 0
                  • wilcorrea
                    wilcorrea last edited by

                    Thanks for share : )

                    1 Reply Last reply Reply Quote 0
                    • LaurentPayot
                      LaurentPayot last edited by

                      @Martin this is a great example, thanks for sharing this.
                      I simply noticed that all the actions in this example are synchronous, so the actions layer is not mandatory. If your mutations names were lowercase then you could directly use ‘mapMutations’ instead of actions + ‘mapActions’. Vuex is really cool 😄

                      1 Reply Last reply Reply Quote 1
                      • LaurentPayot
                        LaurentPayot last edited by

                        @Diferno If I’m right since the RethinkDB team stopped working on Horizon you have to write your own websocket stuff for your client to react to DB changes. That’s why I’m using firebase with https://github.com/vuejs/vuefire

                        D 1 Reply Last reply Reply Quote 0
                        • D
                          Diferno @LaurentPayot last edited by

                          @LaurentPayot said in Quasar + Vuex:

                          rite

                          Thx @LaurentPayot, I’ll give it a try or check Firebase 🙂

                          1 Reply Last reply Reply Quote 1
                          • LaurentPayot
                            LaurentPayot last edited by

                            @Diferno also check https://github.com/posva/vuexfire 🔥

                            Martin 1 Reply Last reply Reply Quote 1
                            • Martin
                              Martin @LaurentPayot last edited by

                              @LaurentPayot I’m also using Firebase as backend. It’s great, but I’m having trouble sometimes controlling all the firebase listeners. Especially when the data model becomes complex/relational, needing data from multiple nodes at the same time, Firebase listeners may start acting like a christmas tree.
                              I’m not using vuefire or vuexfire, but I wonder if any best practices have evolved regarding listeners.
                              If you know of any ‘must reads’ let me know please.
                              All in all I find it though to get the right balance between normalising/denormalising data and keeping listeners under control.
                              Maybe Firebase is just not fit for highly relational stuff.
                              In an ideal world, I’d rather use a real time graph database like http://gun.js.org/.
                              GunJS looks promising, but it’s not production ready yet.

                              1 Reply Last reply Reply Quote 2
                              • LaurentPayot
                                LaurentPayot last edited by LaurentPayot

                                @Martin no problem for me so far with vuefire but my app is far from complete. It’s true that, just like with any other nosql database, relations are painful.
                                I really enjoy the Firebase authentication system, although it was bit tricky to implement a complete solution with usernames. Unfortunately they don’t care about i18n (english only password reset page etc.). The free hosting is something to mention too.
                                Just like you I had a look at gun.js in 2016, and keeping an eye on it 😉

                                1 Reply Last reply Reply Quote 0
                                • First post
                                  Last post