如何在 Nuxt.js 应用程序的 Vuex 商店中设置值

Question

我从来没有用过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 store not in .vue files，所以，我如何在 store 中设置值？

Answer 1

不幸的是，我没有在 .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 }
      }
    })
  }
}

如何在 Nuxt.js 应用程序的 Vuex 商店中设置值

How to set values in Vuex store in Nuxt.js app

javascript

vue.js

vuex

nuxt.js