Vuex - ส่งผ่านพารามิเตอร์หลายตัวเพื่อการกลายพันธุ์

ฉันพยายามตรวจสอบสิทธิ์ผู้ใช้โดยใช้หนังสือเดินทางของ 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 เองเป็นอาร์กิวเมนต์แรกและอาร์กิวเมนต์ที่สองมีพารามิเตอร์ใด ๆ ที่คุณต้องส่งผ่าน

วิธีที่ง่ายที่สุดในการส่งผ่านพารามิเตอร์จำนวนหนึ่งคือการทำลายพารามิเตอร์เหล่านี้ :

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

จากนั้นในการกระทำของคุณในภายหลังคุณสามารถทำได้

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

พูดง่ายๆคือคุณต้องสร้างน้ำหนักบรรทุกของคุณให้เป็นอาร์เรย์หลัก

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

ฉันคิดว่านี่อาจเป็นเรื่องง่ายอย่างที่สมมติว่าคุณกำลังจะส่งผ่านพารามิเตอร์หลายตัวให้คุณดำเนินการเมื่อคุณอ่านการกระทำนั้นยอมรับเพียงสองพารามิเตอร์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()
              })

หวังว่านี่จะช่วยได้