How to get values from vuex store in F7 router

I’m trying and failing to get some values out of my vuex store and into F7 router.

I’m using the exact same export/import syntax I used successfully with Vue-Router, but with F7 router it just doesn’t work. My booleans all come in false, and strings come in as null. It’s driving me batty!

In Vue devtools the boolean in question is true. But in F7 router it is false.

The really infuriating thing is that this works perfectly in Vue-Router.

Can someone please tell me what I’m doing wrong, and how to do this correctly?

store.js

export const store = new Vuex.Store({

  state:{},
  getters:{},
  mutations:{},
  actions:{},
  modules: {
    auth,
    chores,
    house,
    membership,
    supply,
    user
  }

});

routes.js

import {store} from './store/store';

This is the actual routes property.

{
    path: '/',
    component: HomePage,

    async(routeTo, routeFrom, resolve, reject,) {
      if (store.state.user.belongsToHouse) {
        console.log("value: " + store.state.user.belongsToHouse);
        resolve({
          component: JoinHouse})
        }
      else
        {
          console.log("value: " + store.state.user.belongsToHouse);
          resolve({
            component: HomePage})
        }
      }
  },
1 Like

try instead

export default new Vuex.Store({

and in routes

import store from './store/store';

//try console log store
console.log(store.user)

What do you see in console?
And what is in your user store module?

2 Likes

Thank you @nolimits4web!!!

That did it!

Something weird is happening with that one boolean. The F7 router always reads it as false. It reads other booleans correctly. But If I get the value from local storage instead of the vuex store, it reads accurately.

Seems like it is being called up before it is actually set.

What can I do about this?

Hey all,

Bumping as I have the same issue and the above solution isn’t always working for me.

I’m having hit and miss luck on accessing the store on page load. I’d like to check if a user is logged in before loading a page. Using the below works if the page has loaded, but not on a hard reload/fresh visit - the store is unreachable in that instance.

import store from '@/js/store.js';

var routes = [
  {
    path: '/',
    async(routeTo, routeFrom, resolve, reject) {
      var userIsLoggedIn = store.getters.user.data.uid;
      alert("user: ", userIsLoggedIn)
      if (userIsLoggedIn) {
        resolve({
          component: HomePage,
        })
      } else {
        resolve({ component: FormPage })
      }
    }
  },