هل من مشكلة اذا استغنيت عن استخدام vuex وقمت بتخزين كل ما اريد ضمن cookies ؟؟؟
5 Likes
ال vuex و ال cookies هما شيئان مختلفان و لا وجه لمقارنتهما
ال cookies تستخدم لتخزين الداتا المتعلقة بال session state مثل البيانات الخاصة بال user authentication و تفضيلات المستخدم مثلا. بطريقة أخرى يمكن اعتبارها مكان لتخزين البيانات في المتصفح.
في حين ال vuex هو مكتبة لحل مشكل ال state management أي مراقبة التغيرات التي تحصل في ال components وتحديث ال components المتعلقة بالبيانات التي تم تغييرها.
السؤال الذي يمكن طرحه: هل يمكن الاستغناء عن vuex؟
الجواب هو أكيد. ضرورة استعماله تظهر فقط عندما يصير المشروع كبير و معقد نسبيا و يحتاج مكتبة متخصصة لتبسيط ذلك.
يمكنك الرجوع لصفحة vuex لمراجعة المفهوم أكثر
أتمنى أكون أجبتك عن سؤالك 
7 Likes
في الحقيقة
انا سألت هذا السؤال لانك تستطيع تخزين ما تريد ضمن cookes وتستطيع ان تحصل عليه في اي مكان تريد من المشروع.
وهذا ما يقوم به vuex كاحد وظائفه.
هذا ما قصدته من وجه المقارنة.
2 Likes
نعم بإمكانك “تخزين” البيانات باستعمال الكوكيز (سواء في vuex أو بشكل عادي)
لكن vuex يسمح لك بالمحافظة على الـ state، مثلاً: تريد معرفة هل اليوزر مسجل دخول أو لا بهذه الشروط:
- أول ما يسجل دخول تتغير الحالة وتفتح صفحة أخرى للمستخدم
- في حالة دخل المستخدم على url معين وهو غير مسجل دخول يتم تحويله
- يجب الاحتفاظ بالحالة في مكان مثل الكوكيز (لكي يرجع المستخدم لنفس المتصفح وتبقى نفس الحالة state)
- أنت لا تريد تكرار الأكواد للتحقق من الكوكيز كل مرة (تريد مكان واحد تسيطر فيه على الحالة state)
- لو سجل المستخدم خروجه يتم التخلص من حالة “مسجل”
هنا يوفر لك vuex كل هذه الخصائص، أول ما يسجل المستخدم الدخول يتم الاحتفاظ بالحالة في الكوكيز وvuex هو مثل الغلاف لها بحيث أنت ستتعامل مع الـ actions و الـ getters من الـ components
مصدر الصورة: https://dev.to/decoeur_/managing-state-with-vuex---the-guide-i-wish-id-had-28h
الجميل في vuex هو سهولة التنقيح الـ state، يوجد أدوات لمراقبة الحالة ضمن أدوات الكروم Vue.js devtools:
6 Likes
جميل أنا اتفق معك في هذا الكلام لكن أود أن اطلعك على الطريقة التالية التي اتبعتها وتنصحني حسب خبرتك هل هذا مناسب؟
main.js
================
.
.
.
var base = axios.create({
baseURL: 'http://127.0.0.1:8000/',
})
Vue.prototype.$http = base
login.vue
========================
.
.
.
export default {
data(){
return{
data:{
username:'',
password:''
},
user:{},
}
},
methods:{
sendData(){
let data = this.data;
return this.$http.post('users/login', data)
.then(response => {
/* eslint-disable no-console */
data.username = ''
data.password = ''
this.user = response.data;
}, error => {
console.error(error);
});
},
},
watch:{
user :function(value){
if(value == {} ){
this.$store.commit('set_user', {})
this.$cookies.set('user',{});
}
else{
this.$store.commit('set_user', value)
this.$cookies.set('user',value);
this.$router.push({ name: 'user', params: { id: value.id }})
}
} }
addUnit.vue
=================
methods:{
sendData(){
let data = this.unit;
return this.$http.post('units/add', data,
{headers: {'Authorization':'Token '+ this.$cookies.get('user').Authorization}
})
.then(() => {
/* eslint-disable no-console */
data.name = '';
/* emit event */
this.$emit('added')
}, error => {
console.error(error);
});
}
}
هذا الطريقة التي اتبعتها هي جيدة ومناسبة بعد ان استخدمت cookes قبلذلك كنت استخدم vuex في التخزين لكن كانت دوما عمدا احدث الصفحة أو اقوم باي شيء يتم مسح البيانات وبالتالي يجب تسجيل الدخول من جديد.
ما رأيكم؟؟
2 Likes
في هذه الحالة معناه أنك اما تجلب البيانات من الـ cookies بشكل خاطئ، أو لا تقوم بتخزينها بشكل سليم
عموما إذا بإمكانك أن تطلع على المشروع هذا أولاً:
وأخبرني إذا لم تفهم طريقة استعمال الـ vuex store فيه
1 Like
مابزيد على كلام ياسر وهشام فقد اوضحوا الفكرة من الـ Vuex
لكن خلي في بالك انه إستخدامك للـ Cookies لا يعني إستغنائك عن الـ Vuex والعكس، فأنت ستحتاج لكليهما.
لكن كانت دوما عمدا احدث الصفحة أو اقوم باي شيء يتم مسح البيانات وبالتالي يجب تسجيل الدخول من جديد.
فأنت حتى تبقى المستخدم مسجل دخول او تعطيه صلاحية للدخول لـ route معين بتحتاج تعرف حالته و ستقوم بالتأكد من الـ Cookie وتمرير حالته كمسجل دخول في الصفحات اللازمة بالـ Vuex
3 Likes