Nuxt.js의 Vuex 유틸리티 함수에서 $axios를 사용하는 방법

Nuxt.js의 Vuex 유틸리티 함수에서 $axios를 사용하는 방법

Nuxt.js의 VUEX를 다음과 같이 설정합니다.

store
├── README.md
├── posts
│   ├── actions.js
│   ├── getters.js
│   ├── index.js
│   ├── mutations.js
│   └── utils
│       └── getPostById.js
└── index.js

나는 덧붙였다.@nuxtjs/axiosnuxt.config.module에 있는 모듈로 전송하여 사용할 수 있도록 합니다.this.$axios.$get행동할 때론.
단, A는 store/posts/utils/getPostById.js에서는 사용할 수 없습니다.
에러Cannot read property '$axios' of undefined발생합니다.

각 코드는 다음과 같습니다.

· store / index . · ·

import Vuex from 'vuex'
import postsModule from './posts'

new Vuex.Store({
  modules: {
    posts: postsModule
  }
})

· store / index . · ·

import actions from './actions'
import getters from './getters'
import mutations from './mutations'

export const state = () => ({
  posts: [],
  post: {}
})

export default {
  namespaced: true,
  state,
  actions,
  getters,
  mutations
}

· store / displays / actions . · ·

import getPostById from './utils/getPostById'

export default {
  async fetchPost({ commit }, count = 10) {
    const params = { count: count }
    // Here `$axios` can be used normally
    const result = await this.$axios.$get("ApiUrl")
    commit('setPosts', result)
  },
  async fetchPostById({ commit }, category_ids, count = 10) {
    const topCommunities = {}
    const result = await getPostById(id)
    commit('setPost', result)
  }
}

· 스토어/포스트/유틸/getPostById.js

export default async function(post_id) {
  // Here `$axios` can not use
  const result = await this.$axios.$get(`${ApiUrl}/${post_id}`)
  return result
}

사용방법this.$axios.$get안에서.getPostById.js?

질문이 올라온 이후로 많은 것들이 바뀌었다.이제 에 액세스 할 수 있게 되었습니다.$axios경유하여 매장 내 유틸리티this.$axios. nuxt 플러그인은inject을 만들다$axios여기서 설명하는 대로 스토어에서 사용할 수 있는 객체입니다.

예를 들어 다음과 같습니다.

export const actions = {
    async fetchUser () {
        let user = await this.$axios.$get('/me');
    }
}

내가 아는 한, 당신은 nuxtServerInit()의 액티비티에 접속할 수 있습니다.

async nuxtServerInit ({ commit }, { $axios }) {
  const ip = await $axios.$get('http://icanhazip.com')
  commit('SET_IP', ip)
}

NuxtJS 프로젝트에서 Axios를 사용하는 방법에 대한 자세한 내용은 https://axios.nuxtjs.org/usage 페이지를 참조하십시오.

의 직접적인 용도는 다음과 같습니다.axios모듈로 입력하다nuxt.js

1. 구성 요소들

비동기 데이터

async asyncData({ $axios }) {
  const ip = await $axios.$get('http://icanhazip.com')
  ....
}

메서드/작성/마운트 등

methods: {
  async fetchSomething() {
    const ip = await this.$axios.$get('http://icanhazip.com')
    ....
  }
}

2. 작업 저장

{
  actions: {
    async getIP ({ commit }) {
      const ip = await this.$axios.$get('http://icanhazip.com')
      .......
    }
  }
}

3. 숏컷

// Normal usage with axios
let data = (await $axios.get('...')).data

// Fetch Style
let data = await $axios.$get('...')

여기에서는, 다음의 방법으로 액세스 할 수 있습니다.nuxt.js $axios모듈

이것이 새로운 것임을 명심하다v5.12.3이 회답이 이루어졌을 때 해방되다

또한 nuxt js 웹사이트에서 이 axios 모듈 링크를 확인합니다.

언급URL : https://stackoverflow.com/questions/54570522/how-to-use-axios-in-utility-function-in-vuex-of-nuxt-js