State management - vue-stash



  • Hi guys,

    I’ve been very happy using the vue-stash alternative to Vuex.
    Problem is I had to manually edit the entry.js file to accomodate for its usage since it requires the store to be defined in the data object of the first Vue instance ( new Vue(app) ) to be injected in all components.
    Here’s what I did to make it work:

    <% if (store) { %>data: {store},<% } %>
    

    Instead of:

    <% if (store) { %>store,<% } %>
    

    However I did this only for the SPA template. And if I ever update the cli it will be reset so it’s not really persistant. 🙂
    I tried to put a different identifier there, for example stash, but I don’t know where does it come from.
    I’d love to do a PR to support vue-stash if I understand the inner workings better.
    I saw references to plugins, animations - all quasar.conf.js properties, so I fiddled with it and the cli files, but no success.



  • I think I made it work:
    Set stash: true in quasar.conf.js

    stash: true,
    // app plugins (/src/plugins),
    plugins: ['i18n', 'axios'],
    ...
    

    Then in cli entry.js

    <% if (stash) { %>
    import stash from 'src/stash'
    <% } %>
    
    ...
    const app = {
      el: '#q-app',
      router,
    <% if (store) { %>store,<% } %>
    <% if (stash) { %>data: { store: stash },<% } %>
      ...App
    }
    

    Your stash file has to look something like this:

    import Vue from 'vue';
    import VueStash from 'vue-stash';
    
    Vue.use(VueStash);
    
    const store = {
      user: {
        name: 'cody'
    };
    
    export default store;
    

    You can also load vue-stash like a plugin with the new tooling (like axios, i18n…), but you still need to export the store(stash) file.


  • Admin

    Hi,

    This can be done entirely using the app plugin system. Notice you can do injections to app (export default ({ ...., >>> app <<<, ...})) and you can also re-export any other things you need, like the store, if you really need it (const store = { ..... } then export { store, ...any_other_named_export }).

    Also, worth mentioning that app is ‘src/App.vue’, so if you feel uncomfortable to do the data injection in an app plugin, you can directly do that in src/App.vue.

    There is no need to touch entry.js, nor should you.



  • Thanks a lot! I saw the injections but it didn’t really occur to me. 🙂
    I’ll definitely try that. I’m glad if it can be done without modifications to the quasar core.

    Update: That did the trick. Thank you so much! BTW I used the plugin system. 🙂



  • @danikane

    I wish to use vue-stash, but without much success. can you give a step-by-step setup for using it as plugin? thanks in advance!



  • This is the way I am using vue-stash
    Install

    npm install vue-stash
    

    Then :

    quasar new plugin store
    

    it creates store.js in the src/plugins folder. Open it and add :

    // import something here
    import VueStash from 'vue-stash'
    // leave the export, even if you don't use it
    export default ({ app, router, Vue }) => {
      // something to do
      Vue.use(VueStash)
      app.data = {
        store: {
    // define your data here for example
         user: {
             name: 'Bob',
             email: 'bob@bobby.fr'
    }
        }
      }
    }
    

    Then you have to open the quasar config : quasar.conf.js and add ‘store’ in the plugins array

    plugins: [
    ...,
    'store'
    ],
    

    and your good to go. To load the store in your vue files, include :

    store: {
    \\ precise the date you want top import here, for example as mentioned above
       user
    }
    

    be careful to completely define your data in the store.js file if you want them to be reactive.