Authentication 在Nuxt中找不到Vuex模块操作

我正在使用自定义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

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
}

和

store/auth.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

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

。我还使用@axiosnuxt模块与后端通信

<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>

从“js Cookie”导入Cookie
导出默认值{
安装的（）{
this.getCSRFToken（）
},
方法：{
异步getCSRFToken（）{
//调用设置csrftoken cookie的URL
const tokenRequest=等待此操作。$axios.$get（'/token/'））
//获取cookie值
const token=Cookie.get（'csrftoken'）
//把它存到商店里/
此.$store.dispatch（'auth/setToken'，token）
}
}
}

我可以很好地调用URL并从cookie中获取值，但是当我去调度我的操作时，我得到一个错误，上面写着

[vuex]未知操作类型：auth/setToken

我仿效这个榜样建立了我的国家。我的问题是：

在Nuxt中，我可以使用什么公共起点在页面刷新/初始加载时始终加载此文件

为了找到我的操作，我需要在设置中更改什么

---

问题是您的

auth

模块没有名称空间

将默认导出更改为

导出默认值{
名称空间：对，
国家,，
获得者，
突变，
行动
}

您可能应该从根存储中删除

namespaced:true

---

我建议您改为使用Nuxt，因为您正在使用的将在Nuxt 3中删除。比如说

//store/auth.js
从“./types”导入{SET_TOKEN}
导出常量状态=（）=>({
令牌：“”
})
导出常量操作={
setToken（{commit，dispatch}，token）{
提交（设置令牌）
}
}
导出常量突变={
[设置令牌]（状态，令牌）{
state.token=token
}
}

因此，如果我使用模块模式，我不必在任何地方设置

名称空间：true

，对吗？