Vuex - truyền nhiều tham số cho đột biến

Tôi đang cố gắng xác thực người dùng bằng hộ chiếu của vuejs và laravel.

Tôi không thể tìm ra cách gửi nhiều tham số cho đột biến vuex thông qua một hành động.

- cửa hàng -

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

- phương thức đăng nhập -

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

Tôi sẽ rất biết ơn cho bất kỳ loại trợ giúp!

Đột biến mong đợi hai đối số: statevà payload, trong đó trạng thái hiện tại của cửa hàng được chính Vuex chuyển qua làm đối số thứ nhất và đối số thứ hai chứa bất kỳ tham số nào bạn cần vượt qua.

Cách dễ nhất để vượt qua một số tham số là hủy chúng :

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

Sau đó, trong hành động của bạn, bạn có thể chỉ đơn giản là

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

Nói một cách đơn giản, bạn cần xây dựng trọng tải của mình thành một mảng chính

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

Sau đó gửi tải trọng trực tiếp đến hành động

this.$store.dispatch('yourAction', payload)

Không thay đổi hành động của bạn

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

Trong đột biến của bạn, gọi các giá trị bằng khóa

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

Tôi nghĩ rằng điều này có thể đơn giản như giả sử rằng bạn sẽ truyền nhiều tham số cho bạn khi bạn đọc lên, hành động chỉ chấp nhận hai tham số contextvà payloadđó là dữ liệu bạn muốn truyền trong hành động, vì vậy hãy lấy ví dụ

Thiết lập hành động

thay vì

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

làm

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

Gọi (gửi) Hành động

thay vì

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

làm

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

hy vọng điều này sẽ giúp