Я хочу использовать это. $ axios с константами Vuex

avatar
Ke kaji
9 августа 2021 в 00:30
101
1
2

Чего я хочу добиться

Я использую this.$axios много раз, поэтому я попытался поместить его в константу, но это не работает. Я читал официальные документы, но не понял. Это потому, что this недоступен в жизненном цикле Nuxt.js?

Код

url.js

export const AXIOS_POST = this.$axios.$post

export const POST_API = '/api/v1/'

export const POST_ITEMS_API = '/api/v1/post_items/'

Vuex

import * as api from './constants/url.js'  // url.js in this.

export const state = () => ({
  list: [],
  hidden: false
})

export const mutations = {
  
  add (state, response) {
    state.list.push({
      content: response.content,
      status: response.status
    })
  },


  remove (state, todo) {
    state.list.splice(state.list.indexOf(todo), 1)
  },


  edit (state, { todo, text }) {
    state.list.splice(state.list.indexOf(todo), 1, { text })
  },


  toggle (state, todo) {
    todo.status = !todo.status
  },

  cancel (state, todo) {
    todo.status = false
  },

  // アクション登録パネルフラグ
  switching (state) {
    state.hidden = !state.hidden
  }
}

export const actions = {

  post ({ commit }, text) {

//I want to use it here

    this.$axios.$post(api.POST_ITEMS_API + 'posts', {
      post_items: {
        content: text,
        status: false
      }
    })
      .then((response) => {
        commit('add', response)
      })
  }
}

Ошибка

Uncaught TypeError: Невозможно прочитать свойство '$axios' неопределенного

Источник
Bravo
9 августа 2021 в 00:41
1

в утилите импортировать vue и использовать vue.$axios?

Ответы (1)

avatar
kissu
9 августа 2021 в 02:08
1

Поскольку ваш файл находится в каталоге constants, вам, вероятно, следует использовать какой-нибудь файл .env.
Вот руководство о том, как добиться этого в Nuxt: https://coderhelper.com/a/67705541/8816585

Если вы действительно хотите получить к нему доступ в файле, отличном от .vue, вы можете импортировать его, как обычно, с помощью чего-то вроде этого

/constants/url.js

import store from '~/store/index'

export const test = () => {
  // the line below depends of your store of course
  return store.modules['@me'].state.email
}

PS: getters, dispatch и все подобное доступно здесь.

Затем вызовите его на странице или в компоненте .vue следующим образом

<script>
import { test } from '~/constants/url'

export default {
  mounted() {
    console.log('call the store here', test())
  },
}
</script>

Что касается вопроса о жизненном цикле, поскольку файл url.js находится не в файле .vue, а в обычном файле JS, он понятия не имеет о каких-либо жизненных циклах Vue/Nuxt..

Ke kaji
11 августа 2021 в 09:29
1

Извините за поздний ответ и спасибо за ваш комментарий. Я понимаю, что должен использовать аксиомы из env.Access аксиомы из аргумента экспорта по умолчанию.