Vuex - meneruskan beberapa parameter ke mutasi


125

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!

Jawaban:


172

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

Itu tidak mengharapkan argumen kedua, itu opsional.
menggali

Apa paramaters untukaction
Idris Stack

108

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

2
Terima kasih. Inilah yang saya cari
BoundForGlory

Saya menyederhanakan prosesnya karena menurut saya itu membingungkan, senang bisa membantu
peterretief

1
untuk penggunaan sederhana, Anda dapat melakukannya setelah ES6 'YOUR_MUTATION' (status, {key1, key2}) {state.state1 = key1 state.state2 = key2},
pabloRN

3

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

Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.