Здравствуйте!
Делаю 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;
}
},
Если вы поняли мою задачу, то как ее правильно реализовать? Я хоть немного в том направлении? Если да, то что же я не так сделать?
Спасибо :)
Не заметил, я попросту не експортировал store
. :)
Все равно, если есть что добавить, то пишите)
Спасибо)
Айфон мало держит заряд, разбираемся с проблемой вместе с AppLab
Перевод документов на английский язык: Важность и ключевые аспекты
ПриветПишу веб-приложение, которое обращается к API, получает JSON, обрабатывает и выводит на экран полученные данные
Есть задача: при отсутствии textContent'а - перенять принцип работы innerText'а
Недавно начала изучение redux и столкнулся с проблемой, не знаю как поставить дефолтное значениеВот пример кода:
Всем добра! Есть строка такого вида: return showWiki({w: 'wall290708618_2192'}, false, event);