Nuxt + route + vuex : get default state on page load

vue-router
vuex
nuxt

#1

Hi,

i’m trying to use Vuex with nuxt to store and get data from vuex store.
What i’m trying to do is to load a ‘default’ data on page load.

maybe it will be more clear with some code :

1/ - menu items : when i click on a menu item, i update store state

<nuxt-link class="logo__link" to="/" @click.native="updateViewType($event, 'home')">
    <img class="logo__image" src="~assets/images/logo.svg" width="53" height="53" alt="" />
    <h1 class="logo__baseline">
        <span>Lorem ipsum</span>
        <span>dolor sit amet</span>
    </h1>
</nuxt-link>

2/ my component methods :

<script>
import Navigation from '~/components/Navigation.vue'

export default {
  components: {
    Navigation,
  },
  methods: {
    updateViewType(event, type) {
      this.$store.commit('UPDATE_VIEW', type);
    }
  }
}
</script>

3/ My store :

import Vuex from 'vuex'

const createStore = () => {
  return new Vuex.Store({
    state: {
      // Static data
      static_url_list: '/collections/',
      static_url_details: '/collection/',

      // Dynamic data
      display_type: 'home',
      display_color: ''
    },
    mutations: {
      UPDATE_VIEW (state, type) {
        state.display_type = type;
      }
    }
  })
}

export default createStore

So when i click on menu link, display_type is correctly update.

My problem is that i use a router within my application. So for the root of the application, the url will be www.my-domain.com (and display_type should be ‘home’), when i click on first level menu item, i get www.my-domain.com/collection (and display_type will be ‘collection’) and so on…

But when i reach directly the url www.my-domain.com/collection, i want my store to return ‘collection’, but it return ‘home’…

I don’t know if i’m clear :slight_smile:

any help will be appreciate :wink:

thanks