Vuex - उत्परिवर्तन के लिए कई मापदंडों को पारित करना

Question

मैं vuejs और लार्वा के पासपोर्ट का उपयोग करके एक उपयोगकर्ता को प्रमाणित करने की कोशिश कर रहा हूं।

मैं यह पता लगाने में सक्षम नहीं हूं कि एक कार्रवाई के माध्यम से 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

उत्परिवर्तन दो तर्कों की अपेक्षा करते हैं: stateऔर payload, जहां स्टोर की वर्तमान स्थिति को पहले तर्क के रूप में वुक्स द्वारा पारित किया जाता है और दूसरा तर्क आपके पास किसी भी पैरामीटर को रखता है जिसे आपको पास करने की आवश्यकता है।

सबसे आसान तरीका अनेक पैरामीटर पारित करने के लिए है उन्हें संहार :

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

फिर बाद में अपने कार्यों में आप बस कर सकते हैं

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

Comments

यह दूसरे तर्क की उम्मीद नहीं करता है, यह वैकल्पिक है।

— Digout

Paramaters के लिएaction

— इदरीस स्टैक

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

Comments

धन्यवाद। यह वही है जो मैं देख रहा था

— बाउंडफॉरलॉरी

मैंने प्रक्रिया को सरल बनाया क्योंकि मुझे यह भ्रामक लगा, खुशी है कि मदद करने में सक्षम होने के लिए

— पीटरसन

साधारण उपयोग के लिए आप ES6 'Your_MUTATION' (राज्य, {key1, key2}) के बाद {state.state1 = key1 state.state2 = key2},

— pabloRN

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

आशा है कि यह मदद करेगा