Vuex - 将多个参数传递给突变答案

【问题标题】：Vuex - passing multiple parameters to mutationVuex - 将多个参数传递给突变
【发布时间】：2023-04-03 22:34:01
【问题描述】：

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

【解决方案1】：

Mutations 需要两个参数：state 和 payload，其中存储的当前状态由 Vuex 本身作为第一个参数传递，第二个参数包含您需要传递的任何参数。

pass a number of parameters 最简单的方法是destruct them：

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

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

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

【讨论】：

它不期望第二个参数，它是可选的。
action 的参数是什么
您能否补充一下如何从传递参数的外部组件调用突变或操作？
@chick3n0x07CC 该示例与用于操作的示例相同，只是您需要引用this.$store，而不是store。
": 预期的".. 不能那样做

【解决方案2】：

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

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

然后将payload直接发送到action

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

你的行为没有改变

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

在你的变异中，用键调用值

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

【讨论】：

为了简单的使用你可以在 ES6 'YOUR_MUTATION' (state, { key1, key2 } ){ state.state1 = key1 state.state2 = key2 },

【解决方案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()
              })

希望这会有所帮助

【讨论】：