Vuex. Getters. Mutation. Actions. Как правильно работать с Vuex [требует правки]

478
15 августа 2017, 17:02

Здравствуйте!

Делаю SPA, большинство скриптов/блоков/страниц розкидано по компонентам.

Столкнулся с проблемой на проверку залогинен ли пользователь.

Для етого у меня есть отдельный компонент Login.vue, в котором переменная isLogin доступна только для этого же компонента.

Если же я хотел проверить залогинен ли пользователь в другом компоненте, например dashboard.vue, то мне приходилось отправлять запрос с dashboard.vue на проверку.

Меня это не устраивало, поэтому начал изучать Vuex, чтобы иметь глобальные переменные между компонентами.

Mutation, Dispatch, Getters, Actions, State -- все это впервые для меня. Flux`ом никогда не пользовался

В итоге " Йа сделать так ":

Главный. index.js

//require modules
import "babel-core/register"
import "babel-polyfill"
import Vue from 'vue'
import VueRouter from 'vue-router'
import notify from 'v-toaster'
import Vuetify from 'vuetify'
import VueCookies from 'vue-cookies'
import Store from './store/index'
import 'v-toaster/dist/v-toaster.css'
// require components
import Index from '../public/components/App.vue'
import Authorization from './components/Authorization.vue'
import Dashboard from './components/Dashboard.vue'
const routes = [
    { path: '/', component: Index},
    { path: '/signin', component: Authorization},
    { path: '/dashboard', component: Dashboard},
];

//Setup Vue
Vue.use(VueRouter);
Vue.use(notify, {timeout: 5000});
Vue.use(Vuetify);
Vue.use(VueCookies);
const router = new VueRouter({
    mode: 'history',
    routes: routes
});

new Vue({
    el: '#app',
    router: router,
    store: Store
    //render: h => h(Index)

});

store/index.js

import Vue from 'vue'
import Vuex from 'vuex'
import axios from 'axios'
Vue.use(Vuex);
const store = new Vuex.Store({
    state: {
        login: false,
    },
    getters: {
        login(state) {
            return state.login;
        },
    },
    mutations: {
        login(state, {type, value}) {
            state[type] = value;
        },
    },
    actions: {
        async checkLogin ({state, commit}) {
            let res = await axios.post('/checkLogin');
            const login = res.data;
            login ? this.$toaster.info("Welcome") : this.$toaster.info("Not authorized");
            commit('login', {type: 'login', value: login});
        },
    },

});

И допустим сам файл где мне нужно узнать залогинен ли юзверь.

Authorization.vue

<script>
    import axios from 'axios';

    export default {
        data() {
            return {
                email: null,
                path: '/',
                errors: [],
                rules: [],
            }
        },
        computed: {
            login() {
                let login = this.$store.getters.login;
                if(!login)
                    this.$toaster.error("Unauthorized");
                else if ( login )
                    this.$router.push('/dashboard');
                return login;
            }
        },
        methods: {
            SignIn: async function () {
                let data = {email: this.email, password: this.password};
                try {
                    let signin = await axios.post('/login', data);
                    this.setLogin(signin.data);
                } catch(e) {
                    this.errorHandler(e);
                }
            },
            setLogin: function (value) {
                this.$store.commit('login', {type: 'login', value: login});
            },

        }
    }
</script>

И вот как только я перейду на компонент Authorization, в консоли сразу же появиться ошибка, Cannot read property 'getters' of undefined. И ета ошибка вызвана с Authorization.vue в computed :

computed: {
     login() {
         let login = this.$store.getters.login;
         if(!login)
             this.$toaster.error("Unauthorized");
                 else if ( login )
             this.$router.push('/dashboard');
                    return login;
     }
},

Если вы поняли мою задачу, то как ее правильно реализовать? Я хоть немного в том направлении? Если да, то что же я не так сделать?

Спасибо :)

Answer 1

Не заметил, я попросту не експортировал store. :)

Все равно, если есть что добавить, то пишите)

Спасибо)

READ ALSO
Нужен совет по реализации алгоритма

Нужен совет по реализации алгоритма

ПриветПишу веб-приложение, которое обращается к API, получает JSON, обрабатывает и выводит на экран полученные данные

236
Прототипы - присваивание свойства

Прототипы - присваивание свойства

Есть задача: при отсутствии textContent'а - перенять принцип работы innerText'а

314
Как установить value по умолчанию в redux form?

Как установить value по умолчанию в redux form?

Недавно начала изучение redux и столкнулся с проблемой, не знаю как поставить дефолтное значениеВот пример кода:

429
Как удалить заданные символы в строке

Как удалить заданные символы в строке

Всем добра! Есть строка такого вида: return showWiki({w: 'wall290708618_2192'}, false, event);

309