Не удалось найти действие модуля Vuex в Nuxt - PullRequest
Новая
       48

Не удалось найти действие модуля Vuex в Nuxt

1 голос
/ 30 мая 2019

Я работаю над сайтом 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.

Я последовал примеру здесь , чтобы настроить свое состояние.Вот мои вопросы:

  1. Какую общую отправную точку в Nuxt я могу использовать, чтобы всегда загружать ее при обновлении страницы / начальной загрузке?

  2. Что мне нужно изменить в моей настройке, чтобы мое действие было найдено?

1 Ответ

1 голос
/ 30 мая 2019

Проблема в том, что ваш 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
  }
}
...