Question

我正在使用自定义Django后端在Nuxt网站上工作，并且尝试建立一种机制，在该机制中，应用程序加载时，我会调用/token/ URL以获取CSRF令牌，并且然后将其存储在Vuex状态下，以用于为每个后续请求设置的自定义标头中。

首先，这是我的store/index.js：

import Vue from 'vue'
import Vuex from 'vuex'
import auth from '@/store/auth'

const debug = process.env.NODE_ENV !== 'production'

Vue.use(Vuex)

const store = () => {
  return new Vuex.Store({
    namespaced: true,
    modules: {
      auth
    }
  })
}
export default store

和store/auth.js：

import { SET_TOKEN } from './types'

const state = () => ({
  token: ''
})

const getters = {
  token: state => state.token
}

const actions = {
  setToken({ commit, dispatch }, token) {
    commit(SET_TOKEN)
  }
}

const mutations = {
  [SET_TOKEN](state, token) {
    state.token = token
  }
}

export default {
  state,
  getters,
  mutations,
  actions
}

我想不通的一件事是将装入的函数放在哪里，因此它总是在页面重新加载时触发。在常规的Vue应用程序中，它是App.vue，但是我无法找到Nuxt中相同的东西。现在，我只使用index.vue。我还使用@axios Nuxt模块与后端进行通信。

<script>
import Cookie from 'js-cookie'

export default {
  mounted() {
    this.getCSRFToken()
  },
  methods: {
    async getCSRFToken() {
      // Call the URL that sets the csrftoken cookie
      const tokenRequest = await this.$axios.$get('/token/')
      // Get the cookie value
      const token = Cookie.get('csrftoken')
      // Save it to the store./
      this.$store.dispatch('auth/setToken', token)
    }
  }
}
</script>

我可以很好地调用该URL并从cookie中获取值，但是当我去分派动作时，出现一个错误，提示[vuex] unknown action type: auth/setToken。

我按照示例here设置了我的状态。我的问题是这些：

Nuxt的一个常见起点是什么，我可以用来始终在页面刷新/初始加载时加载它？
我需要在设置中进行哪些更改才能找到我的动作？

Answer 1

问题是您的auth模块未命名空间。

将默认导出更改为

export default {
  namespaced: true,
  state,
  getters,
  mutations,
  actions
}

您可能应该从根存储中删除namespaced: true。

我建议您更改为使用Nuxt的Module Mode，因为您正在使用的Classic Mode将在Nuxt 3中删除。例如

// store/auth.js
import { SET_TOKEN } from './types'

export const state = () => ({
  token: ''
})

export const actions = {
  setToken({ commit, dispatch }, token) {
    commit(SET_TOKEN)
  }
}

export const mutations = {
  [SET_TOKEN](state, token) {
    state.token = token
  }
}

在Nuxt中找不到Vuex模块动作

1 个答案: