Я работаю над сайтом Nuxt с настраиваемой серверной частью Django и пытаюсь настроить механизм, при котором при загрузке приложения я вызываю URL-адрес /token/
, чтобы получить токен 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
.
Я следовал примеру здесь, чтобы настроить свое состояние. Мои вопросы таковы:
Какова общая отправная точка в Nuxt, которую я могу использовать, чтобы всегда загружать это при обновлении страницы/первоначальной загрузке?
Что мне нужно изменить в моей настройке, чтобы мое действие было найдено?
Проблема в том, что ваш модуль auth
не имеет пространства имен.
Измените экспорт по умолчанию на
export default {
namespaced: true,
state,
getters,
mutations,
actions
}
Вероятно, вам следует удалить namespaced: true
из корневого хранилища.
Я рекомендую вам перейти на использование Режим модуля Nuxt, поскольку используемый вами Классический режим будет удален в 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
}
}
Итак, если я использую модульный режим, мне не нужно нигде устанавливать
namespaced: true
, верно?