vuejs2: How to pass vuex store to vue-router components

Question

In case when vue-router is not used, store can be passed to child components when declaring new Vue()

But I am using both vue-router and vuex. In this case how can I make store available to components. For e.g. my store.js is typical:

import Vue from 'vue'
import Vuex from 'vuex'
import jwt_decode from 'jwt-decode'
import axios from 'axios'
import VueAxios from 'vue-axios'

Vue.use(Vuex);
Vue.use(VueAxios, axios);

export const store = new Vuex.Store({
  state: {
    jwt: localStorage.getItem('t'),
    endpoints: {
      obtainJWT: 'http://0.0.0.0:8000/auth/obtain_token',
      refreshJWT: 'http://0.0.0.0:8000/auth/refresh_token'
    }
  },
  mutations: {
    updateToken(state, newToken){
      localStorage.setItem('t', newToken);
      state.jwt = newToken;
    },
    removeToken(state){
      localStorage.removeItem('t');
      state.jwt = null;
    }
  },
  actions:{
    obtainToken(username, password){
    //commented code
    },
    refreshToken(){
    //commented code
    },
    inspectToken(){
    //commented code
    }
  }
  });

My main.js file is as below:

import Vue from 'vue'
import App from './App'
import router from './router'

Vue.config.productionTip = false

import { store } from './store'
console.log(store)
new Vue({
  el: '#app',
  router,
  store,
  components: { App },
  template: '<App/>'
})

And router/index.js file is as below:

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import Signup from '@/components/signup/Signup'
import store from '../store.js'

Vue.use(Router)

export default new Router({
  mode: 'history',
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    },
    {
      path: '/login',
      name: 'Login',
      component: function (resolve) {
        require(['@/components/login/Login.vue'], resolve)
      }
    },
    {
      path: '/signup',
      name: 'Signup',
      component: Signup
    }
  ]
})

Now how can I pass store to my Signup component. Even though I am passing store in new Vue() it is not available in Signup component

Roland · Accepted Answer · 2018-04-22 06:55:15Z

I think the problem is that you importing store and you use the ../store.js,but when you import js file you dont have to use the .js so it has to be import store from '../store'

Also you dont have to pass the vuex store in components using vue-router. So follow below the installation of vuex store and vue-router!

Vuex Store:

import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

export const store  = new Vuex.Store({
    state: {
        propertiesName: 'PropValue'
    },
    getters: {},
    mutations: {},
    actions: {}
});

Vue-Router:

import Vue from 'vue'
import Router from 'vue-router'
import Page from '@/components/Page.vue'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/Page',
      name: 'Page',
      component: Page,
    },
    //other routes
  ],
  mode: 'history',
  scrollBehavior(to, from, savedPosition) {
    if(savedPosition){ //when use press back button will go at the position he was on the page
        return savedPosition
    }
    if(to.hash){ //if has a hash positition to go
        return { selector: to.hash } //go to the page in scrolled Position
    }
    return { x:0, y: 0 } //go to the page in scroll = 0 Position
  }  
})

main.js:

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import { store } from '../store/store'

new Vue({
  el: '#app',
  router,
  store,
  template: '<App/>',
  components: { App }
})

Note:Doing that,now you have access of router and store in all your components

To use the store in your components:

this.$store.state.propertiesName

To use the router in your components:

this.$router.push({name: 'Page'})

Hi, thanks for answering. I tried your solution and your doubt about importing is not the issue. I modified the code as you mentioned and console.log(store) is still printing store object in main.js but console.log(this.$store) is printing undefined in components. I have edited the question to present exact code, please have a look
Hi, I found the issue. The store was available since beginning but I was trying console.log(this.$store) in components <script> tag, outside every method. Hence at this time component is not initiated and store was unavailable. Thanks for your help
Glad to help you,but still you dont have to import the store in the router file.Why you importing it?
Oh...that I forgot to remove! It's not required as you mentioned

Collectives™ on Stack Overflow

vuejs2: How to pass vuex store to vue-router components

1 Answer 1

4 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Linked

Related