Почему Vuex не работает в отдельном файле?

Question

[Дмитрий Кузнецов]

Разобравшись с вопросом Почему «Cannot read property 'authCheck' of undefined»? (хз как получилось), появилась новая проблема. Дело в том, что у меня есть отдельный файл, в котором происходит некоторые действия с данными (что-то типо "модели" в php). В одном из методов я использую Vuex для получения данных, но почему то консоль ругается вот так:

Cannot read property 'state' of undefined

.

main.js:

main.js

// Главные модули
import Vue from 'vue'
import VueRouter from 'vue-router'
import VeeValidate from 'vee-validate'
import axios from 'axios'
import VueAxios from 'vue-axios'
import Vuex from 'vuex'

Vue.use(VueRouter)
Vue.use(VeeValidate)
Vue.use(VueAxios, axios)
Vue.use(Vuex)

// Второстепенные модули
import App from './App.vue'
import store from './store'
import router from './router'

// Модули для работы с данными
// import AuthUser from './packages/AuthUser.js'
// Vue.use(AuthUser)

// Styles
import Vuetify from 'vuetify'
import 'vuetify/dist/vuetify.css'
Vue.use(Vuetify)

// Настройка модулей
axios.defaults.baseURL = 'http://api.site.ru/'; // Базовый URL адрес
axios.defaults.headers.common['X-CSRF-TOKEN'] = 'Bearer ' + '*********************************';    // Токен

Vue.config.productionTip = false

new Vue({
    el: '#app',
    render: h => h(App),
    router,
    store
})

router.js:

router.js

import Vue from 'vue';
import VueRouter from 'vue-router'
import Meta from 'vue-meta'

Vue.use(VueRouter)
Vue.use(Meta)

import Home from '../components/Home.vue'
import News from '../components/News.vue'
import Games from '../components/Games.vue'

import Users from '../components/Users/Users.vue'
import Logout from '../components/Users/Logout.vue'

import NotFound from '../components/pages/NotFound.vue'

// Авторизация
import Login from '../components/Auth/Login.vue'
import Register from '../components/Auth/Register.vue'

const router = new VueRouter({
    mode: 'history',
    routes: [
        /* Нейтральные страницы */
        {
            path: '/',
            name: 'home',
            component: Home
        },
        {
            path: '/news',
            name: 'news',
            component: News,
        },
        {
            path: '/games',
            name: 'games',
            component: Games,
        },

        /* Для пользователей */
        {
            path: '/users/:id',
            name: 'users',
            component: Users,
            meta: {
                isAuth: true
            },
        },
        {
            path: '/logout',
            name: 'users.logout',
            component: Logout,
            meta: {
                isAuth: true
            }
        },

        /* Для гостей */
        {
            path: '/auth/login',
            name: 'auth.login',
            component: Login,
            meta: {
                isAuth: false
            }
        },

        {
            path: '/auth/register',
            name: 'auth.register',
            component: Register,
            meta: {
                isAuth: false
            }
        },

        /* Web-серверные ошибки и сообщения */
        {
            /* 404 - Page not found */
            path: '/404',
            name: 'notfound',
            component: NotFound
        }, {
            path: '*',
            redirect: '/404'
        }
    ],

    linkActiveClass: '',
    linkExactActiveClass: ''
})

router.beforeEach(
    (to, from, next) => {
        if(to.matched.some(record => record.meta.isAuth)){
            if(store.state.Auth.auth){
                next({
                    path: '/'
                })
            } else next()
        }else if(to.matched.some(record => record.meta.isAuth)){
            if(!store.state.Auth.auth){
                next({
                    path: '/auth/login'
                })
            }else{
                next()
            }
        } else next()
    }
)

export default router

store.js:

store.js

import Vue from 'vue'
import Vuex from 'vuex'
import createPersistedState from 'vuex-persistedstate'

import Auth from './modules/Auth.js'

Vue.use(Vuex)

const store = new Vuex.Store({
    plugins: [ createPersistedState({ storage: window.sessionStorage }) ],

    modules: {
        Auth: Auth
    },
})

export default store

Модуль для store.js - Auth.js:

Auth.js

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

Vue.use(Vuex)

const Auth = new Vuex.Store({
    state: {
        auth: false,    // Авторизован ли пользователь
        user: {},   // Данные о пользователе
        token: {},  // Токен для API
    },

    mutations: {
        /**
         * Сохраняем данные токена
         * @param state
         */
        tokenAuth: (state, token) => {
            state.token = token
        },

        /**
         * Сохраняем информацию о том, что пользователь авторизован
         * @param state
         * @param data
         */
        auth: (state, data) => {
            state.auth = true
            state.user = data
        },

        /**
         * "Выходим" из аккаунта и удаляем все данные с auth()
         * @param state
         */
        logout: (state) => {
            state.auth = false
            state.user = {}
            state.user = {}
        }
    },
})

export default Auth

Comments

[Evgeny Kulakov]

Вы как бы не привели возможно код самого источника проблемы - ваш стор.

[Дмитрий Кузнецов]

Evgeny Kulakov, дело в том, что стор работает, но не в файле Auth.js. Сейчас дополню вопрос...
PS: Пробовал в auth.js добавлять импорт, но всё равно ни чего не сработало.

[akass]

На мой взгял логичнее AuthUser написать в виде модуля для store и удобнее и проблем не будет

[Дмитрий Кузнецов]

akass, а можно пример, если вас не затруднит?
PS: Случаем не как у автора вопроса: Как правильно работать с модулями vuex??

[Дмитрий Кузнецов]

Evgeny Kulakov, akass, ну так что, в чём проблема может быть? не подскажите?

[akass]

Дмитрий Кузнецов, Покажите код, где вы используете AuthUser.

[Дмитрий Кузнецов]

akass, момент, сейчас в вопрос добавлю)

[akass]

Дмитрий Кузнецов, https://stackoverflow.com/a/42604186/4629628 Хотите выносите в модуль (в доке отлично описано как), хотите оставьте в руте, но держите все это в сторе и работайте с ним.

[Дмитрий Кузнецов]

akass, уже переписан стор как модуль. Но ошибка всё так же.

[akass]

Дмитрий Кузнецов, вы сделали испорт стора напрямую в роутер?

[Дмитрий Кузнецов]

akass, пробовал и импорт в роутер, и без него - результата нет(

[akass]

Дмитрий Кузнецов, в Роутере написано $state, такого нет, просто state

[Дмитрий Кузнецов]

akass, простая помарочка, не обращайте внимание.

[akass]

Дмитрий Кузнецов, Посмотрите в отладке что где не так прилетает, и вы зачем-то сделали модуль как новый стор new Vuex.Store(); , а нодо просто экспорт обычного объкта с полями state и прочим.

[Дмитрий Кузнецов]

akass, всё, спасибо, решил проблему. Проблема была в том, что я не импортировал стор в роутер и не писал "store.state..." (писал через "this.$state...").
Потом пересмотрел логику роутера и заметил, что неправильно он работал. Переписал роутер:

router.js

import Vue from 'vue';
import VueRouter from 'vue-router'
import Meta from 'vue-meta'
import store from '../store'

Vue.use(VueRouter)
Vue.use(Meta)

import Home from '../components/Home.vue'
import News from '../components/News.vue'
import Games from '../components/Games.vue'

import Users from '../components/Users/Users.vue'
import Logout from '../components/Users/Logout.vue'

import NotFound from '../components/pages/NotFound.vue'

// Авторизация
import Login from '../components/Auth/Login.vue'
import Register from '../components/Auth/Register.vue'

const router = new VueRouter({
    mode: 'history',
    routes: [
        /* Нейтральные страницы */
        {
            path: '/',
            name: 'home',
            component: Home
        },
        {
            path: '/news',
            name: 'news',
            component: News,
        },
        {
            path: '/games',
            name: 'games',
            component: Games,
        },

        /* Для пользователей */
        {
            path: '/users/:id',
            name: 'users',
            component: Users,
            meta: {
                isAuth: true
            },
        },
        {
            path: '/logout',
            name: 'users.logout',
            component: Logout,
            meta: {
                isAuth: true
            }
        },

        /* Для гостей */
        {
            path: '/auth/login',
            name: 'auth.login',
            component: Login,
            meta: {
                isGuest: false
            }
        },

        {
            path: '/auth/register',
            name: 'auth.register',
            component: Register,
            meta: {
                isGuest: true
            }
        },

        /* Web-серверные ошибки и сообщения */
        {
            /* 404 - Page not found */
            path: '/404',
            name: 'notfound',
            component: NotFound
        }, {
            path: '*',
            redirect: '/404'
        }
    ],

    linkActiveClass: '',
    linkExactActiveClass: ''
})

router.beforeEach(
    (to, from, next) => {
        if(to.matched.some(record => record.meta.isAuth)){
            if(store.state.Auth.auth){
                next({
                    path: '/feed'
                })
            } else next()
        }else if(to.matched.some(record => record.meta.isGuest)){
            if(!store.state.Auth.auth){
                next({
                    path: '/auth/login'
                })
            }else{
                next()
            }
        } else next()
    }
)

export default router

[akass]

Дмитрий Кузнецов, я думал this.$state вы уже раньше убрали. Рад что проблема решена.

[Дмитрий Кузнецов]

akass, имеете ввиду просто так?:

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

Vue.use(Vuex)

const Auth = {
    state: {
        auth: false,    // Авторизован ли пользователь
        user: {},   // Данные о пользователе
        token: {},  // Токен для API
    },

    mutations: {
        getAuthentication: (state, data) => {
            return Vue.axios.post('/oauth/token', data)
                .then(response => {
                    console.log(response.data)
                    return response.data
                })
        },

        /**
         * Сохраняем данные токена
         * @param state
         */
        tokenAuth: (state, token) => {
            state.token = token
        },

        /**
         * Сохраняем информацию о том, что пользователь авторизован
         * @param state
         * @param data
         */
        auth: (state, data) => {
            state.auth = true
            state.user = data
        },

        /**
         * "Выходим" из аккаунта и удаляем все данные с auth()
         * @param state
         */
        logout: (state) => {
            state.auth = false
            state.user = {}
            state.user = {}
        }
    },
}

export default Auth

[akass]

Дмитрий Кузнецов, Да

[Дмитрий Кузнецов]

akass, ещё раз спасибо, всё работает!)

Answer 1

[akass]

Необходимо вынести Auth логику в модуль vuex и работать с ним. Подробности в комментариях к вопросу.

Comments

[Дмитрий Кузнецов]

Спасибо что ответ написали,а то я уже хотел удалять вопрос)