アクションのVuex動的値

Question

localStorageからparamsとして必要なクラスをいくつか使用しています。そして私はこれらのクラスをvuexのアクションの中で使うようにしています。しかし、スクリプトがロードされると、値が設定され、localStorageがvuexの値を更新した場合でも、アクションは変更されません。

たとえば、

someService.js

export default class { 
    constructor (token) { 
    this.headers = {headers: { Authorization: token }} 
    } 
} 

クラスは初めだけでインスタンス化されているので、あなたは常にトークンのログイン後でもsomeServiceを呼び出すこの方法では、常にnullである

import someService from '@/services/someService' 
const myService = new someService(localStorage.getItem('token')) 

const actions = { 
    myService.stuff() 
    // do stuff 
} 

をactions.js。

「トークン」の現在の値を変更した後にどのように取得することができますか？それぞれの行動について再インスタンス化する必要がありますか？

アイデア？

Answer 1

私もこれに対処しなければならず、オブジェクトを再インスタンス化しました。

私はAxiosを使用していますが、他のほとんどのケースでは似ています。

const someService =() => { 
    return axios.create({ 
    baseURL: myServerUrl, 
    headers: {'Authorization': 'Bearer ' + localStorage.getItem('token')} 
    }) 
} 
const actions = { 
    someService().get('items') 
} 

axiosまた、デフォルトをこのように変更することができます、そしてあなたは、認可

axios.defaults.headers.common['Authorization'] = `Bearer ${token}` 

を含む必要はないだろうが、それは本当にあなたが

を設定するときのように、どちらかあなたの問題を解決しないだろう

const myService = new someService(localStorage.getItem('token')) 

初期化時にトークンを入れます。その別のオプションは以下のようになり...

someService.js

export default class { 
    constructor (token) { 
    this.headers = {headers: { Authorization: token }} 
    }, 
    updateToken (token) { 
    this.headers.headers.Authorization = token 
    } 
} 

は、私はあなたがあなたのトークンの変更後に再インスタンス化するべきだと思います

import someService from '@/services/someService' 
const myService = new someService(localStorage.getItem('token')) 

const actions = { 
    myService.stuff() 
    // do stuff 
    // log in 
    // get new token 
    myService.updateToken(localStorage.getItem('token')) 
    // do stuff with new token 
    myService.stuff() 
}