스토어 또는 게터의 상태에 액세스하시겠습니까?_WEBPACK_IMPORTED_MODULE_3__store__.a.dispatch는 함수가 아닙니다.

스토어 또는 게터의 상태에 액세스하시겠습니까?_WEBPACK_IMPORTED_MODULE_3__store__.a.dispatch는 함수가 아닙니다.

사용자가 로그인 경로로 리디렉션되는 경로에 액세스할 수 있도록 인증되었는지 확인하려고 합니다. 문제는 다음을 실행하는 방법을 모른다는 것입니다.fetchUser나의 행동beforeEach즉, 라우터 스크립트에서 내 게터에 액세스할 수 없습니다.

store.js

import mutations from './mutations';
import actions from './actions';
import getters from './getters';

export default {
    state: {
        isLoggedIn: !!localStorage.getItem("token"),
        user_data : localStorage.getItem("user_data"),
    },
    getters ,
    mutations,
    actions
}

routes/index.js

import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)

import routes from './rutas';
import store from '../store/';
const router = new VueRouter({
  mode : 'history',
  routes 
})

router.beforeEach((to, from, next) => {
   if (to.matched.some(record => record.meta.requiresAuth)) {
        if (!store.getters.isLoggedIn)  {
            next({path: '/login'})
        }
        else {
            store.dispatch('fetchUser') // Line error
            next()
        }
    } 
    else {
        next() // make sure to always call next()!
    }
})

getters.js

export default {
    isLoggedIn: state => {
        return state.isLoggedIn
    },
    user_name  : state =>{
        if(! _.isEmpty(this.user_data))
            return JSON.parse(state.user_data).name
        return '';
    },
    isEmptyUser : state =>{
        return  _.isEmpty(this.user_data);
    },
    isAdmin: state => {
        if(! _.isEmpty(this.user_data)) return state.user_data.nivel===1
        return false;
    }
}

작업.js

 export default {
 /* more methods*/

 , async fetchUser({ commit }) {
    return await axios.post('/api/auth/me')
        .then(res => {   
            setTimeout(() => {
                localStorage.setItem("user_data", JSON.stringify(res.data)); 
                Promise.resolve(res.data); 
            }, 1000);             
        },
        error => {                  
            Promise.reject(error);          
        });
}

콘솔에 오류가 반환됩니다.

_WEBPACK_IMPORTED_MODULE_3__store__.a.dispatch는 함수가 아닙니다.

어떻게 해야 하나요? 접근 방식이 잘못되었고 조치에 직접 액세스하지 말아야 하나요?

문제는 당신의store실제 저장소 개체가 아니라 생성하는 데 사용되는 개체입니다.

해결책은 파일을 실제 저장소로 내보내는 것입니다.

import Vue from 'vue';
import Vuex from 'vuex';
import mutations from './mutations';
import actions from './actions';
import getters from './getters';

Vue.use(Vuex); // added here
export default new Vuex.Store({  // changed here
    state: {
        isLoggedIn: !!localStorage.getItem("token"),
        user_data : localStorage.getItem("user_data"),
    },
    getters ,
    mutations,
    actions
})  // changed here

이제 라우터 코드가 작동합니다.

당신이 또한 알아야 할 것은 아마도 당신의 main.js 어딘가에서 위와 같이 스토어가 초기화되었다는 것입니다.예:

import store from '../store/';
new Vue({
  store: new Vuex.Store(store),
  // ...
})

이제 해당 초기화를 제거하고 저장소를 직접 사용해야 합니다.

import store from '../store/';
new Vue({
  store: store, // or simply store
  // ...
})

그리고 모든 것이 좋아야 합니다.

언급URL : https://stackoverflow.com/questions/49743934/access-the-state-of-store-or-getters-webpack-imported-module-3-store-a-dis