vuejs2: vuex 스토어를 vue-router 컴포넌트에 전달하는 방법

vuejs2: vuex 스토어를 vue-router 컴포넌트에 전달하는 방법

의 경우에 대비해서vue-router사용되지 않습니다. 선언 시 저장소를 하위 구성 요소에 전달할 수 있습니다.new Vue()

하지만 둘 다 쓰고 있어요.vue-router그리고.vuex이 경우 어떻게 하면store이용 가능한components예를 들어, 제store.js표준:

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
    }
  }
  });

main.js 파일은 다음과 같습니다.

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/>'
})

router/index.js 파일은 다음과 같습니다.

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
    }
  ]
})

이제 어떻게 통과하지?store나의 것Signup요소.매장을 지나가고 있지만new Vue()에서는 사용할 수 없습니다.Signup요소

내 생각에 당신이 매장을 수입하고 사용하는 것이 문제인 것 같다.../store.jsjs 파일을 Import 할 때는,.js그래야지import store from '../store'

또한 vue-router를 사용하여 컴포넌트의 vuex 스토어를 전달할 필요가 없습니다.따라서 아래 vuex 스토어 및 vue-router 설치를 따르십시오.

Vuex 스토어:

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.filename:

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 }
})

주의: 이렇게 하면 라우터에 액세스하여 모든 컴포넌트에 저장할 수 있습니다.

구성 요소에서 저장소를 사용하려면:

this.$store.state.propertiesName

컴포넌트에서 라우터를 사용하려면 다음 절차를 수행합니다.

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

언급URL : https://stackoverflow.com/questions/49959675/vuejs2-how-to-pass-vuex-store-to-vue-router-components