Vuex ਐਪਲੀਕੇਸ਼ਨਾਂ ਲਈ ਇੱਕ state ਪ੍ਰਬੰਧਨ ਲਾਇਬ੍ਰੇਰੀ ਹੈ Vue.js, ਜੋ ਤੁਹਾਨੂੰ component ਤੁਹਾਡੀ ਐਪਲੀਕੇਸ਼ਨ ਵਿੱਚ ਵੱਖ-ਵੱਖ s ਵਿੱਚ ਡੇਟਾ ਦਾ ਪ੍ਰਬੰਧਨ ਅਤੇ ਸਮਕਾਲੀਕਰਨ ਕਰਨ ਦੀ ਆਗਿਆ ਦਿੰਦੀ ਹੈ। Vuex ਫਲੈਕਸ ਆਰਕੀਟੈਕਚਰ ਨੂੰ ਲਾਗੂ ਕਰਦਾ ਹੈ, ਜਿਸ ਨਾਲ ਐਪਲੀਕੇਸ਼ਨ ਦਾ ਪ੍ਰਬੰਧਨ ਕਰਨਾ ਆਸਾਨ ਅਤੇ ਕੁਸ਼ਲ ਹੈ state ।
ਵਿੱਚ ਮੁੱਖ ਧਾਰਨਾਵਾਂ Vuex ਸ਼ਾਮਲ ਹਨ
1. State
in ਤੁਹਾਡੀ state ਐਪਲੀਕੇਸ਼ਨ Vuex ਲਈ ਕੇਂਦਰੀਕ੍ਰਿਤ ਡੇਟਾ ਸਟੋਰ ਨੂੰ ਦਰਸਾਉਂਦਾ ਹੈ। ਇਹ ਐਪਲੀਕੇਸ਼ਨ ਦਾ ਡਾਟਾ ਰੱਖਦਾ ਹੈ ਜਿਸ ਨੂੰ ਵੱਖ-ਵੱਖ component s ਵਿਚਕਾਰ ਸਾਂਝਾ ਕਰਨ ਦੀ ਲੋੜ ਹੁੰਦੀ ਹੈ। state ਇੱਥੇ ਇੱਕ ਨੂੰ ਪਰਿਭਾਸ਼ਿਤ ਕਰਨ ਦਾ ਇੱਕ ਉਦਾਹਰਨ ਹੈ Vuex:
2. Mutations
Mutations state ਵਿੱਚ ਸੋਧ ਕਰਨ ਲਈ ਜ਼ਿੰਮੇਵਾਰ ਹਨ Vuex । ਉਹ ਸਮਕਾਲੀ ਫੰਕਸ਼ਨ ਹਨ ਜੋ ਕਰੰਟ state ਅਤੇ ਪੇਲੋਡ ਨੂੰ ਆਰਗੂਮੈਂਟ ਦੇ ਤੌਰ 'ਤੇ ਲੈਂਦੇ ਹਨ। ਇੱਥੇ ਇੱਕ ਪਰਿਵਰਤਨ ਨੂੰ ਪਰਿਭਾਸ਼ਿਤ ਕਰਨ ਦਾ ਇੱਕ ਉਦਾਹਰਨ ਹੈ Vuex:
3. Actions
Actions ਨੂੰ ਅਸਿੰਕ੍ਰੋਨਸ ਓਪਰੇਸ਼ਨਾਂ ਨੂੰ ਸੰਭਾਲਣ ਅਤੇ mutations ਸੰਸ਼ੋਧਿਤ ਕਰਨ ਲਈ ਡਿਸਪੈਚ ਕਰਨ ਲਈ ਵਰਤਿਆ ਜਾਂਦਾ ਹੈ state । ਉਹਨਾਂ ਵਿੱਚ API ਕਾਲਾਂ, ਅਸਿੰਕ ਕਾਰਜ, ਜਾਂ ਗੁੰਝਲਦਾਰ ਤਰਕ ਸ਼ਾਮਲ ਹੋ ਸਕਦੇ ਹਨ। ਇੱਥੇ ਇੱਕ ਕਾਰਵਾਈ ਨੂੰ ਪਰਿਭਾਸ਼ਿਤ ਕਰਨ ਦਾ ਇੱਕ ਉਦਾਹਰਨ ਹੈ Vuex:
4. Getters
Getters state ਤੁਹਾਨੂੰ ਸਟੋਰ ਤੋਂ ਪ੍ਰਾਪਤ ਕੀਤੀ ਮੁੜ ਪ੍ਰਾਪਤ ਕਰਨ ਅਤੇ ਗਣਨਾ ਕਰਨ ਦੀ ਇਜਾਜ਼ਤ ਦਿੰਦਾ ਹੈ Vuex । ਉਹ s ਨੂੰ ਵਾਪਸ ਕਰਨ ਤੋਂ ਪਹਿਲਾਂ ਡੇਟਾ ਨੂੰ ਐਕਸੈਸ ਕਰਨ ਅਤੇ ਹੇਰਾਫੇਰੀ ਕਰਨ ਲਈ ਉਪਯੋਗੀ ਹਨ component. ਇੱਥੇ ਇੱਕ ਗੈਟਰ ਨੂੰ ਪਰਿਭਾਸ਼ਿਤ ਕਰਨ ਦਾ ਇੱਕ ਉਦਾਹਰਨ ਹੈ Vuex:
Vuex ਆਪਣੇ ਪ੍ਰੋਜੈਕਟ ਵਿੱਚ ਸਥਾਪਤ ਕਰਨ ਲਈ Vue.js, ਤੁਸੀਂ ਇਹਨਾਂ ਕਦਮਾਂ ਦੀ ਪਾਲਣਾ ਕਰ ਸਕਦੇ ਹੋ
ਕਦਮ 1: Vuex npm ਜਾਂ ਧਾਗੇ ਰਾਹੀਂ ਸਥਾਪਿਤ ਕਰੋ:
ਜਾਂ
ਕਦਮ 2: store.js
ਆਪਣੇ ਪ੍ਰੋਜੈਕਟ ਦੀ ਰੂਟ ਡਾਇਰੈਕਟਰੀ ਵਿੱਚ ਇੱਕ ਫਾਈਲ ਬਣਾਓ । ਇਹ ਉਹ ਥਾਂ ਹੈ ਜਿੱਥੇ ਅਸੀਂ ਐਪਲੀਕੇਸ਼ਨ ਦਾ ਐਲਾਨ ਅਤੇ ਪ੍ਰਬੰਧਨ ਕਰਾਂਗੇ state ।
ਕਦਮ 3: ਫਾਈਲ ਵਿੱਚ store.js
, ਆਯਾਤ ਕਰੋ Vuex ਅਤੇ ਇੱਕ ਨਵਾਂ ਸਟੋਰ ਆਬਜੈਕਟ ਬਣਾਓ:
ਕਦਮ 4: ਫਾਈਲ ਵਿੱਚ main.js
, ਸਟੋਰ ਨੂੰ ਆਯਾਤ ਕਰੋ ਅਤੇ ਇਸਨੂੰ ਆਪਣੀ Vue ਐਪਲੀਕੇਸ਼ਨ ਨਾਲ ਲਿੰਕ ਕਰੋ:
ਕਦਮ 5: ਹੁਣ ਤੁਸੀਂ Vuex ਆਪਣੇ ਪ੍ਰੋਜੈਕਟ ਵਿੱਚ ਸਥਾਪਿਤ ਅਤੇ ਸੈਟ ਅਪ ਕਰ ਲਿਆ ਹੈ। ਤੁਸੀਂ ਆਪਣੇ state s, getters, mutations, ਅਤੇ ਫਾਈਲ actions ਵਿੱਚ ਘੋਸ਼ਿਤ ਕਰ ਸਕਦੇ ਹੋ store.js
, ਅਤੇ ਉਹਨਾਂ ਨੂੰ ਆਪਣੇ Vue component s ਵਿੱਚ ਵਰਤ ਸਕਦੇ ਹੋ।
ਉਦਾਹਰਨ:
ਫਾਈਲ ਵਿੱਚ store.js
, ਤੁਸੀਂ state ਇਸ ਤਰ੍ਹਾਂ ਇੱਕ ਸਧਾਰਨ ਅਤੇ ਪਰਿਵਰਤਨ ਘੋਸ਼ਿਤ ਕਰ ਸਕਦੇ ਹੋ:
ਇੱਕ Vue ਵਿੱਚ component, ਤੁਸੀਂ ਅਤੇ ਫੰਕਸ਼ਨਾਂ state ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਅਤੇ ਪਰਿਵਰਤਨ ਦੀ ਵਰਤੋਂ ਕਰ ਸਕਦੇ ਹੋ : mapState
mapMutations
ਇਹਨਾਂ ਕਦਮਾਂ ਦੇ ਨਾਲ, ਤੁਸੀਂ ਸਫਲਤਾਪੂਰਵਕ ਸਥਾਪਿਤ ਕਰ ਲਿਆ ਹੈ Vuex ਅਤੇ ਇਸਨੂੰ state ਆਪਣੀ Vue.js ਐਪਲੀਕੇਸ਼ਨ ਦੇ ਪ੍ਰਬੰਧਨ ਲਈ ਵਰਤ ਸਕਦੇ ਹੋ।
ਦੇ ਨਾਲ Vuex, ਤੁਸੀਂ ਆਸਾਨੀ ਨਾਲ ਅਤੇ ਲਗਾਤਾਰ ਐਪਲੀਕੇਸ਼ਨ ਦਾ ਪ੍ਰਬੰਧਨ ਕਰ ਸਕਦੇ ਹੋ state । ਇਹ ਡੇਟਾ ਪ੍ਰਬੰਧਨ ਲਈ ਇੱਕ ਢਾਂਚਾਗਤ ਪਹੁੰਚ ਪ੍ਰਦਾਨ ਕਰਦੇ ਹੋਏ, ਕੋਡ ਦੀ ਸਾਂਭ-ਸੰਭਾਲ ਅਤੇ ਮੁੜ ਵਰਤੋਂਯੋਗਤਾ ਨੂੰ ਵਧਾਉਂਦਾ ਹੈ।