dima9595
@dima9595
Junior PHP

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

Доброго времени суток!
Разобравшись с вопросом Почему «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
  • Вопрос задан
  • 416 просмотров
Решения вопроса 1
@akass
Developer
Необходимо вынести Auth логику в модуль vuex и работать с ним. Подробности в комментариях к вопросу.
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы