[解決済み】Vuex - ミューテーションに複数のパラメータを渡す
2022-04-15 21:31:27
質問
vuejsとlaravelのpassportを使ってユーザー認証をしようとしています。
アクションで複数のパラメータをvuexのミューテーションに送信する方法がわかりません。
- ストア
export default new Vuex.Store({
state: {
isAuth: !!localStorage.getItem('token')
},
getters: {
isLoggedIn(state) {
return state.isAuth
}
},
mutations: {
authenticate(token, expiration) {
localStorage.setItem('token', token)
localStorage.setItem('expiration', expiration)
}
},
actions: {
authenticate: ({
commit
}, token, expiration) => commit('authenticate', token, expiration)
}
})
- ログイン方法
login() {
var data = {
client_id: 2,
client_secret: '**************************',
grant_type: 'password',
username: this.email,
password: this.password
}
// send data
this.$http.post('oauth/token', data)
.then(response => {
// send the parameters to the action
this.$store.dispatch({
type: 'authenticate',
token: response.body.access_token,
expiration: response.body.expires_in + Date.now()
})
})
}
どんなことでもいいので、よろしくお願いします
どのように解決するのですか?
変異は2つの引数を必要とします。
state
と
payload
ここで、ストアの現在の状態はVuex自身によって第1引数として渡され、第2引数には渡す必要のあるパラメータが格納されます。
最も簡単な方法は 複数のパラメータを渡す は 破棄する :
mutations: {
authenticate(state, { token, expiration }) {
localStorage.setItem('token', token);
localStorage.setItem('expiration', expiration);
}
}
そして、後のアクションでは、単純に
store.commit('authenticate', {
token,
expiration,
});
関連
-
[解決済み] v-if内部の複雑な条件
-
vue3 が axios エラーを導入する 未定義または null をオブジェクトに変換できない
-
[解決済み] Nuxt.jsで "window is not defined "と表示される。
-
[解決済み] Vuex - 計算されたプロパティ "name "が割り当てられたが、セッターを持たない
-
[解決済み】Vue.Jsの計算されたプロパティでパラメータを渡すことはできますか?
-
[解決済み】vuexからストアの値を監視する方法は?
-
[解決済み】名前空間が設定された2つのVuexモジュール間でアクションをディスパッチする方法はありますか?
-
[解決済み] Vueプロジェクトにおけるviewsフォルダとcomponentsフォルダの違いは何ですか?
-
[解決済み] ページ更新時のVuexの状態
-
[解決済み] Vuexで他のゲッターからゲッターを呼び出すにはどうすればよいですか?
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み] Vue.js Chrome DevtoolsがVue.jsを検出しないのはなぜですか?
-
[解決済み] Vue.jsで12件中1~3件を表示させるには?
-
[解決済み] Vue 2.0でコンポーネント自身を削除する方法
-
未定義のプロパティ '0' を読み取ることができません。
-
vue リクエストエラー Uncaught (プロミス内)
-
[解決済み] Vue.jsでグローバルフィルタを大量に追加する方法は?
-
[解決済み】TypeError: this.getOptions は関数ではありません。
-
[解決済み】Vueのデータからhrefに値を渡すには?
-
[解決済み】Vuex - ミューテーションに複数のパラメータを渡す
-
[解決済み] Vueの「エクスポートデフォルト」と「新しいVue」の比較