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

    How to use vuex store without access to vue instance?

    Framework
    2
    2
    791
    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.
    • F
      Fragster last edited by

      E.g in beforeRouteEnter hook?
      I try make it in this way (store is dynamically filled in boot folder):

      import StoreFunction from 'store';
      const store = StoreFunction();
      ...
      export default {
      
        beforeRouteEnter(to, from, next) {
          if (store.state.catalog.loading) next({to: 'routename'});
          else next();
        }
      

      but it causes an error “do not mutate vuex store state outside mutation handlers.”

      to fix it, I change store/index.js to return store instance instead of function, and it works. But I’m worrying about possible side effects of this ‘fix’.

      //export default function(/* { ssrContext } */) {
        export default new Vuex.Store({
      

      Is this right fix, or there is another ‘proper’ way in my case?

      T 1 Reply Last reply Reply Quote 0
      • T
        tof06 @Fragster last edited by

        @Fragster
        It should be confirmed by a more a experienced dev than me, but if you’re not building for SSR mode, you can export directly the Store instance like you did.

        What I’ve done is something similar :

        
        const Store = new Vuex.Store({...})
        
        export { Store }
        export default function (/* ssrContext */) {
          return Store
        }
        

        This way, I export both the function (default export), and the instance
        And, when I need to access Store outside component, I just import { Store } from 'src/store'

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