Nuxt.js 앱의 Vuex 스토어에서 값을 설정하는 방법

Nuxt.js 앱의 Vuex 스토어에서 값을 설정하는 방법

사용한 적이 없다Vuex와 함께Nuxt.js그래서 나는 그 문제를 만났다.여기 제 것이 있습니다.store/index.js파일:

export const state = () => ({
  wrongCredentials: false,
  logged: false,
  uxd: null
})

export const mutations = {
  setWrongCredentials(state, value) {
    state.wrongCredentials = value
  },
  setLogged(state, value) {
    state.logged = value
  },
  setUxd(state, value) {
    state.uxd = value
  },
}

보시다시피 상태와 돌연변이가 있습니다.다른 파일에서는 사용자의 JWT 토큰을 확인하고 결과 M에 따라 값을 설정합니다.

import jwt from 'jsonwebtoken'
import cert from '../jwt/public'

export default {
  verify (token) {
    jwt.verify(token, cert, async (err, decoded) => {
      if (err) {
        this.$store.state.wrongCredentials = true
        this.$store.state.logged = false
        this.$store.state.uxd = null
      } else {
        this.$store.state.wrongCredentials = false
        this.$store.state.logged = true
        this.$store.state.uxd = decoded.uxd
      }
    })
  }
}

여기 보이는 코드는 올바르게 동작하지 않습니다.값을 설정하지 않을 뿐입니다.그래서 저는 돌연변이를 만들어 다음과 같은 작업을 했습니다.

await this.$store.dispatch('setWrongCredentials', true)

또한 작동하지 않습니다.문제는 어떻게 해야 할지 모르겠다는 것입니다.Vuex보관하지 않다.vue저장소에서 값을 설정하려면 어떻게 해야 합니까?

유감스럽게도, 저는 제가 원했던 것처럼 이 문제의 해결책을 찾지 못했다..js다른 해결책이 있습니다.

먼저 상태와 돌연변이뿐 아니라 동작도 설정해야 합니다.

export const actions = {
  fetchWrongCredentials(ctx, value) {
    ctx.commit('setWrongCredentials', value)
  },
  fetchLogged(ctx, value) {
    ctx.commit('setLogged', value)
  },
  fetchUxd(ctx, value) {
    ctx.commit('setUxd', value)
  }
}

그리고 당신의 안에Vue다음과 같이 액션을 사용하여 값을 설정해야 합니다.

  methods: {
    ...mapActions(['fetchWrongCredentials', 'fetchLogged', 'fetchUxd']),
    async login() {
      await login({
        password: this.userPassword,
        login: this.userLogin,
        twoFactor: this.twoFactor
      }).then(result => {
        const jwtRes = jwt.verify(result.token)
        this.fetchLogged(true)
        this.fetchWrongCredentials(false)
        this.fetchUxd(jwtRes.token)
      }).catch(() => {
        this.fetchLogged(false)
        this.fetchWrongCredentials(true)
        this.fetchUxd(null)
        this.error = true
        setTimeout(() => {
          this.error = false
        }, 1000)
      })
    }
  }

내 경우엔, 나는 그것을 수정해야만 했어요..js파일:

import jwt from 'jsonwebtoken'
import cert from '../jwt/public'

export default {
  verify (token) {
    return jwt.verify(token, cert, (err, decoded) => {
      if (err) {
        return false
      } else {
        return { token: decoded.uxd }
      }
    })
  }
}

언급URL : https://stackoverflow.com/questions/71083813/how-to-set-values-in-vuex-store-in-nuxt-js-app