ভিউ এক্স

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

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