Vuex の非同期問題を解決する: 最新のトークン値を取得する
Vuex を使用して状態を管理する場合、特に非同期データをフェッチして Vuex に保存した直後にフェッチする場合に、非同期の問題が発生することがあります。この記事では、この問題を解決し、トークン値を取得するときに常に最新の値を取得できるようにする方法について説明します。
問題の背景
authログイン、ログアウト、トークンの確認のためのメソッドを含むVuex モジュールがあるとします。ログインが成功したら、トークンを Vuex の状態に保存し、必要に応じてその状態からトークン値を取得します。
const auth = {
state: {
token: null
},
mutations: {
SET_TOKEN(state, token) {
state.token = token;
},
CLEAR_TOKEN(state) {
state.token = null;
}
},
actions: {
login({
commit }, loginForm) {
return new Promise((resolve, reject) => {
// 调用登录接口，传递登录表单数据
axios.post('http://localhost:8989/user/login', loginForm)
.then(response => {
const token = response.data.data.token;
// 将token保存到Vuex中
commit('SET_TOKEN', token);
// 将token保存到浏览器的localStorage中，以便在刷新页面后仍然可以保持登录状态
localStorage.setItem('token', token);
resolve();
})
.catch(error => {
reject(error);
});
});
},
logout({
commit }) {
// 清除token并重定向到登录页面
commit('CLEAR_TOKEN');
localStorage.removeItem('token');
router.push('/');
},
checkToken({
commit }) {
const token = localStorage.getItem('token');
if (token) {
// 将token保存到Vuex中
commit('SET_TOKEN', token);
} else {
// 如果没有token，则重定向到登录页面
router.push('/');
}
},
getToken(){
console.log("我被调用了")
return this.state.token;
}
}
};
上記のコードでは、アクションに getToken メソッドを配置しています。これにより問題が発生します。つまり、ログインに成功しても、トークンも正常に設定されますが、トークンを取得すると、このトークンがヌル。
非同期の問題により、getTokenメソッドをすぐに呼び出すと、null呼び出し時にメソッドがまだ呼び出されていなかった可能性があるためgetToken、値が返されることがあります。SET_TOKEN
解決
この問題を解決するには、トークンの値を取得するgetTokenメソッドをstateに移動し、 を定義する必要があります。getterこのようにして、 が呼び出されるとgetToken、最新のトークン値が返されます。
変更されたコードは次のとおりです。
const auth = {
state: {
token: null
},
mutations: {
SET_TOKEN(state, token) {
state.token = token;
},
CLEAR_TOKEN(state) {
state.token = null;
}
},
actions: {
login({
commit }, loginForm) {
return new Promise((resolve, reject) => {
// 调用登录接口，传递登录表单数据
axios.post('http://localhost:8989/user/login', loginForm)
.then(response => {
const token = response.data.data.token;
// 将token保存到Vuex中
commit('SET_TOKEN', token);
// 将token保存到浏览器的localStorage中，以便在刷新页面后仍然可以保持登录状态
localStorage.setItem('token', token);
resolve();
})
.catch(error => {
reject(error);
});
});
},
logout({
commit }) {
// 清除token并重定向到登录页面
commit('CLEAR_TOKEN');
localStorage.removeItem('token');
router.push('/');
},
checkToken({
commit }) {
const token = localStorage.getItem('token');
if (token) {
// 将token保存到Vuex中
commit('SET_TOKEN', token);
} else {
// 如果没有token，则重定向到登录页面
router.push('/');
}
}
},
getters: {
getToken(state) {
return state.token;
}
}
};
コンポーネントでは、 を使用してthis.$store.getters.getToken最新のトークン値を取得できます。
次のコードを介して、正常に取得できます
