ProgramingTip

Vuex- 작업에 여러 매개 변수 전달

bestdevel 2020. 10. 18. 18:54
반응형

Vuex- 작업에 여러 매개 변수 전달


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



나는 어떤 종류의 도움에 매우 감사 할 것입니다!


테이션에는 두 개의 인수가 필요합니다 :

state그리고 payload, 스토어의 현재 상태는 Vuex 자체에서 첫 번째 인수로 전달되고 두 번째 인수는 전달해야하는 모든 매개 변수를 보유합니다.
여러 매개 변수를 전달하는 가장 쉬운 방법은 매개 변수를 파괴하는 것입니다.

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

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

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

},

참고 URL : https://stackoverflow.com/questions/46097687/vuex-passing-multiple-parameters-to-action

반응형