Question

我正在尝试使用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()
              })
     })
}

我会非常感谢任何帮助！

Answer 1

Mutations需要两个参数：state和payload，其中存储的当前状态由Vuex本身作为第一个参数传递，第二个参数包含您需要传递的任何参数。 /> 传递大量参数的最简单方法是破坏它们：

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

然后在你的行动中你可以简单地

commit('authenticate', {
    token,
    expiration
})

Answer 2

简单来说，您需要将有效负载构建为密钥数组

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

}，

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

希望这会有所帮助

Vuex - 将多个参数传递给操作

3 个答案: