[vue.js] Vuex-돌연변이에 여러 매개 변수 전달

Program / 글쓴이

vuejs와 laravel의 여권을 사용하여 사용자를 인증하려고합니다.

작업을 통해 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()
              })
     })
}

어떤 도움을 주시면 매우 감사하겠습니다!

답변

뮤 테이션에는 두 개의 인수가 필요합니다 : stateand payload. 여기서 스토어의 현재 상태는 Vuex 자체에서 첫 번째 인수로 전달되고 두 번째 인수는 전달해야하는 모든 매개 변수를 보유합니다.

여러 매개 변수 를 전달하는 가장 쉬운 방법 은 매개 변수 를 파괴하는 것입니다 .

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

그런 다음 나중에 작업에서 간단히

store.commit('authenticate', {
    token,
    expiration,
});

답변

간단히 말해서 페이로드를 키 배열로 구축해야합니다.

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
},

답변

나는 간단한으로 당신이 행동은 두 개의 매개 변수를 허용 읽어 당신 행동에 여러 매개 변수를 전달하려고하는 것을 가정 해 봅시다으로이 될 수 있다고 생각 context하고 payload당신의 데이터는 너무 예를 보자 행동에 전달할 인

액션 설정

대신에

actions: {
        authenticate: ({ commit }, token, expiration) => commit('authenticate', token, expiration)
    }

하다

actions: {
        authenticate: ({ commit }, {token, expiration}) => commit('authenticate', token, expiration)
    }

호출 (파견) 조치

대신에

this.$store.dispatch({
                  type: 'authenticate',
                  token: response.body.access_token,
                  expiration: response.body.expires_in + Date.now()
              })

하다

this.$store.dispatch('authenticate',{
                  token: response.body.access_token,
                  expiration: response.body.expires_in + Date.now()
              })

이것이 도움이 되길 바랍니다

답변