ডেভসংকেত

ভিউ এক্স

ভিউ এক্স হচ্ছে ভিউ জেএস অ্যাপ্লিকেশন এর জন্য একটি স্টেট ম্যানেজমেন্ট প্যাটার্ন + লাইব্রেরী। এটি একটি অ্যাপ্লিকেশনের সমস্ত কম্পোনেন্টের (components) জন্য একটি কেন্দ্রীভূত স্টোর হিসাবে কাজ করে, এবং নিশ্চিত করে যেন স্টেটগুলো শুধুমাত্র প্রত্যাশিতভাবে মিউটেট হতে পারে। এটা ভিউ এর অফিশিয়াল ডেভটুল এক্সটেনশন এর সাথেও পুরোপুরি খাপ খায়, যা জিরো-কনফিগ টাইম ট্রাভেল ডিবাগিং এবং স্টেট স্নাপশট ইমপোর্ট/এক্সপোর্ট এর মত জটিল কাজ করতে সাহায্য করে।

কন্ট্রিবিউটর

  • princerafid01

শেয়ার করুন

Vuex এর স্টোর যদি বানাতে চাও

  • একটি নতুন স্টোর শুরু করতে চাইলে

    new Vuex.Store({ //all properties will go here })
  • স্টোর এর প্রপার্টি ( স্ট্রিক্ট মোড ) - স্ট্রিক্ট মোড ট্রু থাকলে , ভিউএক্স এর স্টেট যদি মিউটেশন হ্যান্ডেলার এর বাইরে মিউটেট করা হয় তাহলে এরর থ্রো করবে

    strict: true
  • ভিউএক্সের স্টোর এর ভিতর স্টেট রাখা

    const store = new Vuex.Store({
    state: { 
     todos: [ 
     	 { id: 1, text: '...', done: true }, 
     	 { id: 2, text: '...', done: false } 
     ] 
     } 
     })
  • ভিউএক্সের স্টোর এর ভিতর গেটার রাখা

    const store = new Vuex.Store({ 
    ...
    getters: {
     	 doneTodos:
     		 state => {
     	 	 	 return state.todos.filter(todo => todo.done)
     	}
    }
    })
  • ভিউএক্সের স্টোর এর ভিতর মিঊটেশন রাখা

    const store = new Vuex.Store({
    ...
    mutations: {
     	 anyMutationName (state) {
    // mutate any state here
     	 }
    }
    })
  • ভিউএক্সের স্টোর এর ভিতর একশন রাখা - মিঊটেশন এর ভিতর সরাসরি মিউটেট না করে একশন এর ভিতরে মিউটেট করা উচিৎ

    const store = new Vuex.Store({
    ...
    actions: {
     	 anyActionName (context) {
     	 	 context.commit('anyMutationName')
     	}
    }
    })
  • যখন আমরা লার্জ স্কেলে কোন প্রজেক্ট করি তখন খুব সহজেই আমাদের স্টোর ফাইল বিশাল বড় হয়ে যেতে পারে , তাই আমরা আমাদের স্টোর কে ছোট ছোট ভাগে ভাগ করে নিতে পারি মডিউল করার মাধ্যমে।

    const moduleA = {
     	 state: () => ({ ...
    	}),
    	mutations: { ...
    	},
    	actions: { ...
    	},
    	getters: { ...
    	}
    	}
    
    
    const moduleB = {
    	state: () => ({ ...
    	}),
    	mutations: { ...
    	},
    	actions: { ...
    	}
    }
    
    
    const store = new Vuex.Store({
    	modules: {
    	a: moduleA,
    	b: moduleB
    	}
    })
    
    
    store.state.a // -> `moduleA`'s state
    store.state.b // -> `moduleB`'s state
    

ভিউএক্স এর স্টোর এর কিছু ইন্সট্যান্স মেথড

  • মিউটেশন একশন এর ভিতরে করার জন্য

    commit('anyMutationName')
  • একশন কে ট্রিগার করার জন্য

     dispatch('anyActionName')

ভিউএক্স এ কম্পোনেন্টের স্টেট হেল্পার মেথড

  • স্টোর এর যেকোন স্টেট কে এক্সেস করার জন্য

    mapState()
  • স্টোর এর যেকোন গেটার কে এক্সেস করার জন্য

     mapGetters()
  • স্টোর এর যেকোন একশন কে কম্পোনেন্ট এর ভিতর এভেইলেভেল করার জন্য

     mapActions()
  • স্টোর এর যেকোন মিউটেশন কে কম্পোনেন্ট এর ভিতর এভেইলেভেল করার জন্য , যা পরে কম্পোনেন্ট এর নিজস্ব ফাংশন এর মতই রান করা যায়

    mapMutations()