venom99
@venom99

Как исправить проблему работы $router.push() в store?

Когда я делал запрос в backend на проверку логина и пароля через auth.vue всё работало нормально и меня перебрасывало на нужную страницу в случае успешной авторизации, но когда мне понадобилось запрос оформить через store, чтобы впоследствии обращаться к данным пользователя из любого места, у меня перестал выполняться переброс на другую страницу this.$router.push.('/main') в файле index.js.
store(index.js) 
import {createStore} from "vuex";
import axios from "axios";


export default createStore({
    state: () => ({
        data() {
            return{
                id: 0,
                username: "",
                password: "",
                status: 0,
                eror: 0,
            }
        },
}),
    getters: {



    },
    mutations: {
        setlogin(state,username) {
            state.username = username

        },
        setpassword(state, password){
             state.password = password;
        },



    },
    actions: {
        async login() {
            try {
                const {id, username, password, status} = this.state;
                const {data} = await axios.post('http://127.0.0.1:5000/login', {
                    id,
                    username,
                    password,
                    status
                })
                const mydata = (JSON.parse(data))
                if (mydata[3] === 1) {
                    return this.$router.push('/main')
                }
                if (mydata[3] === 2) {
                    return this.$router.push('/teacher')
                }
            } catch (e) {
                this.eror += 2
                return setTimeout(() => { this.eror -= 2 }, 1500);
            }
        }

    },
})


auth.vue
<template>
  <head>
    <title>Вход</title>
    <meta http-equiv="Content-type" content="text/html;charset=UTF-8"/>
  </head>
  <body class="bodyy">
  <img src="../../public/123.png" class="img1" alt="">
  <div class="div2">
    Добро пожаловать в:
  </div>
  <div class="div3">
    ELECTRONIC DIARY
  </div>
  <form @submit.prevent ="login"  class="form1" action="#" method="post">
    <div v-if="eror > 1" class="div5"> Неверный логин или пароль </div>
    <button type="submit" class="button">
      Войти
    </button>
    <div class="div1">
      ВХОД
    </div>
    <div class="div4"><strong>__________</strong></div>
    <div>
      <img src="../../public/3.png" class="img2" alt=""><input v-model="message" type="text" tabindex="1"
                                                               name="username" placeholder="login:" class="input1">
    </div>
    <br>
    <div>
      <img src="../../public/4.png" class="img3" alt=""><input  v-model="message2" type="password" tabindex="2"
                                                               name="userpass"
                                                               placeholder="password:" class="input2">
    </div>
  </form>
  <footer class="footer">
    <div class="footer_div1">
      <a target="AAA</a>
    </div>
    <div class="footer_div2">
      Детский телефон доверия: 8-800-2000-122
    </div>
    <div class="footer_div3">
      @gmail.com
    </div>
    <div class="footer_div4">
      Дизайн: AAA
    </div>
  </footer>
  </body>
</template>

<script>
import {mapActions, mapMutations} from 'vuex'
export default {
  name: "auth",

  methods: {
    ...mapActions({
      login: 'login'
    }),
    ...mapMutations({
      setlogin: "setlogin",
      setpassword: "setpassword",
    })
  },
  computed:{
    message: {
      set (value) {
        this.$store.commit('setlogin', value)
      }
    },
    message2: {
      set (value1) {
        this.$store.commit('setpassword', value1)
      }
    },

  },
}
</script>


router.js
import Main from "@/pages/Main";
import {createRouter, createWebHistory} from "vue-router";
import Auth from "@/pages/Auth";
import Teacher from "@/pages/Teacher";
import Store from "@/pages/Store"
const routes = [
    {
        path: '/main',
        component: Main,
    },
    {
        path: '/',
        component: Auth,
    },
    {
        path: '/teacher',
        component:Teacher
    },
    {
        path: '/store',
        component:Store
    },

]

const router = createRouter({
    routes,
    history: createWebHistory(process.env.BASE_URL)
})

export default router;


main.js
import App from './App'
import router from "@/router/router";
import {createApp} from "vue";
import store from '@/store'
const app = createApp(App)

app
    .use(router)
    .use(store)
    .mount('#app');

60ef4bb886cb2599029902.jpeg
  • Вопрос задан
  • 49 просмотров
Решения вопроса 1
Aetae
@Aetae
Тлен
В action'ах(и вообще в store) this, вполне очевидно, не указывает на текущий инстанс Vue(потому что какой для стора текущий?).

Либо отдельно экспортируйте - импортируйте router, либо добавьте его в store.

Ну а лучше не пихайте логику в хранилише. Хранилище должно хранить данные. Как поблажка - делать пред\постобработку(и то уже на грани). Получение же данных, логику переходов и всё такое прочее - вынесите в отдельный сервисный слой, никак не связанный с хранилищем.
И похрен, что об этом говорят 100500 уроков от "гуру".
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

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

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