2017-09-07 26 views
5

私はvuejsとlaravelのパスポートを使ってユーザを認証しようとしています。

私は、複数のパラメータをアクションを介してvuex突然変異に送る方法を理解することができません。

- 店 -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() 
       }) 
    }) 
} 



私は助けのあらゆる種類のために非常に感謝するだろう!

答えて

12

突然変異では、stateと​​が必要です。ここで、ストアの現在の状態はVuex自身が最初の引数として渡し、2番目の引数は渡す必要のあるパラメータを保持します。
パラメータの数を渡すための最も簡単な方法は、それらを破壊することです:

mutations: { 
    authenticate(state, { token, expiration }) { 
     localStorage.setItem('token', token) 
     localStorage.setItem('expiration', expiration) 
    } 
} 

を次に、後にあなたの行動にすることができますあなたにあなたのペイロードを構築する必要があります簡単に言えば、単に

commit('authenticate', { 
    token, 
    expiration 
}) 
+0

作品で値を呼んで!どうもありがとうございます!! – Schwesi

4

キー配列

payload = {'key1': 'value1', 'key2': 'value2'} 

次にあなたが行動に直接ペイロード送信

あなたの突然変異で
`this.$store.dispatch('yourAction', payload)` 

あなたのアクションに変化がない

yourAction: ({commit}, payload) => { 
     commit('YOUR_MUTATION', payload) 
    }, 

は魔法のようにキー

'YOUR_MUTATION' (state, payload){ 
state.state1 = payload.key1 
state.state2 = payload.key2 

}、

関連する問題