How to fix $router.push() problem in store?

V

venom992021-07-14 23:54:05

Vue.js

venom99, 2021-07-14 23:54:05

When I made a request to the backend to check the login and password through auth.vue, everything worked fine and I was redirected to the desired page in case of successful authorization, but when I needed to issue a request through the store in order to subsequently access user data from anywhere, I have this.$router.push.('/main') in the index.js file has stopped redirecting to another page.

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');

Reply

Answer the question

In order to leave comments, you need to log in

1 answer(s)

A

Aetae, 2021-07-15
@venom99

In actions (and in general in stores) this, quite obviously, does not point to the current Vue instance (because what is the current one for the store?).
Either separately export-import router, or add it to store.
Well, it's better not to shove the logic in the store . The repository must store the data. As an indulgence - to do pre / post-processing (and then already on the verge). Receiving the same data, the logic of transitions, and so on - take out in a separate service layer , not related to the storage in any way .
And fuck what 100500 lessons from the "guru" say about this.