我想用这个。 $ axios 与 Vuex 常量

Question

我想实现的

我用了很多次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: Cannot read property '$axios' of undefined

Answer 1

由于您的文件位于 constants 目录中，您可能应该使用一些 .env 文件。
这是有关如何在 Nuxt 中实现此目的的指南：

如果您真的想将它访问到一个非 .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 个生命周期。

我想用这个。 $ axios 与 Vuex 常量

I want to use this. $ axios with Vuex constants

javascript

vuex

nuxt.js

我想实现的

代码

错误