Vuex - meneruskan beberapa parameter ke mutasi

Saya mencoba untuk mengotentikasi pengguna menggunakan vuejs dan paspor laravel.

Saya tidak dapat menemukan cara mengirim beberapa parameter ke mutasi vuex melalui sebuah tindakan.

- toko -

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

- metode login -

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

Saya akan sangat berterima kasih atas bantuan apa pun!

Mutasi mengharapkan dua argumen: statedan payload, di mana status penyimpanan saat ini diteruskan oleh Vuex itu sendiri sebagai argumen pertama dan argumen kedua menyimpan parameter apa pun yang perlu Anda teruskan.

Cara termudah untuk melewatkan sejumlah parameter adalah dengan menghancurkannya :

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

Kemudian nanti dalam tindakan Anda, Anda bisa dengan mudah

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

Secara sederhana, Anda perlu membangun payload Anda menjadi key array

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

Kemudian kirim payload langsung ke tindakan

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

Tidak ada perubahan dalam tindakan Anda

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

Dalam mutasi Anda, panggil nilai dengan kunci

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

Saya pikir ini bisa sesederhana asumsikan bahwa Anda akan memberikan beberapa parameter kepada Anda tindakan saat Anda membaca di sana tindakan hanya menerima dua parameter contextdan payloaddata mana yang ingin Anda sampaikan dalam tindakan jadi mari kita ambil contoh

Menyiapkan Tindakan

dari pada

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

melakukan

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

Memanggil (mengirim) Aksi

dari pada

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

melakukan

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

semoga ini bisa membantu