IT이야기

도우미 기능에서 Vuex 스토어에 액세스하는 방법

cyworld 2022. 5. 28. 10:13
반응형

도우미 기능에서 Vuex 스토어에 액세스하는 방법

vue-axios auth by api_token i의 경우 도우미 파일 api.js를 사용합니다.

오류 발생 - Uncaughed TypeError: 정의되지 않은 속성 'getters'를 읽을 수 없습니다.

api.js 도우미가 Vuex $store 글로벌 스토리지를 인식하지 못하는 것 같습니다.

다른 컴포넌트에서는 Import가 필요 없습니다.Vuex 스토리지는 모든 앱에서 사용할 수 있습니다.

이거 어떻게 쓰세요?도우미에 $스토리지가 있습니까?

//api.js 
import axios from 'axios'

let api_token = this.$store.getters.get_api_token  //got error!


export function get(url) {
    return axios({
        method: 'GET',
        url: url,
        headers: {
            'Authorization': `Bearer ${api_token}`
        }
    })
}

//Vuex
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex);

const store = new Vuex.Store({
    state: {
        api_token: 'vnbnvnvnvb',

    },
    getters: {
        get_api_token(state){
            return state.api_token
        }
    },
});

export default store


//App.vue
import {get} from './helpers/api';
export default {

    created() {
        get(`/api/user/${1}`)
            .then((res) => {
                ///do it
            })
            .catch((err) => {
                console.log(err);
            })

    }
}

답을 찾았습니다.

// some JS file
import store from './../store'; // path to your Vuex store

let user = store.getters.user;
// do stuff with user

https://laracasts.com/discuss/channels/vue/vuex-accessing-vuex-outside-of-a-vue-component

언급URL : https://stackoverflow.com/questions/44869897/how-to-access-vuex-store-in-helper-functions

반응형