Vuex - передача мутації декількох параметрів

124

Я намагаюся аутентифікувати користувача за допомогою паспорта 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()
              })
     })
}

Буду дуже вдячний за будь-яку допомогу!

vue.js vuejs2 vuex

— Швесі
джерело

172

Мутації очікують два аргументи: stateі payload, коли поточний стан магазину передається самим Vuex як перший аргумент, а другий аргумент містить будь-які параметри, які вам потрібно пройти.

Найпростіший спосіб передавати ряд параметрів - це знищити їх :

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

Тоді згодом у своїх діях можна просто

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

— Ніт
джерело

Він не очікує другого аргументу, він необов’язковий.

— виїзд

Які параметриaction

— Ідріс Стек

108

Простіше кажучи, вам потрібно зібрати свій корисний вантаж у ключовий масив

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

— петерретиф
джерело

2

Дякую. Це саме те, що я шукав

— BoundForGlory

Я спростив процес, тому що вважаю це заплутаним, радий, що можу допомогти

— peterretief

1

для простого використання ви можете зробити після ES6 'YOUR_MUTATION' (стан, {key1, key2}) {state.state1 = key1 state.state2 = key2},

— pabloRN

3

я думаю, що це може бути настільки просто, нехай припускають, що ви збираєтеся передавати вам кілька параметрів дії, коли ви читаєте там дії, приймають лише два параметри, 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()
              })

сподіваюся, що це допоможе

— лібері
джерело