我正在尝试使用 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()
})
})
}
我会非常感谢任何形式的帮助！
突变需要两个参数：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,
});
简单来说，您需要将有效负载构建到密钥数组中
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
},
我认为这可以很简单，假设您将在读取操作时将多个参数传递给您的操作，操作只接受两个参数 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()
})
希望这会有所帮助
关注公众号
不定期副业成功案例分享
action的参数是什么this.$store而不是store。