Vuex - передача нескольких параметров мутации

126

Я пытаюсь аутентифицировать пользователя с помощью 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 Schwesi
источник

172

Мутации ожидают двух аргументов: stateиpayload , где текущее состояние хранилища передается самим Vuex в качестве первого аргумента, а второй аргумент содержит любые параметры, которые вам нужно передать.

Самый простой способ передать ряд параметров - уничтожить их :

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

Позже в своих действиях вы можете просто

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

гнида
источник

Он не ожидает второго аргумента, это необязательно.

digout

What the paramaters foraction

Idris Stack

110

Проще говоря, вам нужно собрать полезную нагрузку в массив ключей.

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

peterretief
источник

2

Спасибо. Это именно то, что я искал

BoundForGlory

Я упростил процесс, потому что нашел это запутанным, рад, что могу помочь

Петертьев

1

для простого использования вы можете сделать после ES6 'YOUR_MUTATION' (state, {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()
              })

надеюсь, это поможет

Liberi
источник

Vuex - передача нескольких параметров мутации

Ответы: