State management - vue-stash

danikane

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.

danikane

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.

rstoenescu

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.

danikane

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.

altezzalab

@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!

Nico-L

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.

ItaiLewin

when use:

quasar new plugin store

i get the following error:

app:new ⚠️  Invalid asset type: plugin +0ms

lucasfernog

Are you using v1? “Plugin” is now called “boot”

ItaiLewin

Yes, indeed, thanks

now I try to make it works.
did as the example above, but when try to get user.name I get undefined
but I get 140+ errors like this:

typeError: Cannot set property $store of #<Vue> which has only a getter...

ItaiLewin

@itailewin
fixed by removing VUEX,

No More Posting New Topics!

State management - vue-stash