Framework7 Store হলো একটি বিল্ট-ইন স্টেট ম্যানেজমেন্ট (State Management) সমাধান, যা অ্যাপ্লিকেশন জুড়ে ডেটা শেয়ার এবং হ্যান্ডেল করতে ব্যবহৃত হয়। এটি Vuex বা Redux-এর মতো 3rd party টুলের প্রয়োজন ছাড়াই অ্যাপ্লিকেশনের বিভিন্ন কম্পোনেন্টে স্টেট সিঙ্ক্রোনাইজ করে।
Store এর মৌলিক ধারণা
Framework7 Store মূলত একটি জাভাস্ক্রিপ্ট অবজেক্ট যা অ্যাপ্লিকেশন-ওয়াইড ডেটা এবং স্টেট রাখা, আপডেট করা, এবং পরিচালনা করতে সাহায্য করে। এই Store ব্যবহার করে আপনি যেকোন পেজ বা কম্পোনেন্ট থেকে স্টেট পেতে অথবা সেট করতে পারেন।
Store তৈরি করা
Framework7 অ্যাপ ইন্সট্যান্স তৈরি করার সময় Store কনফিগার করা হয়। app.js বা আপনার মূল জাভাস্ক্রিপ্ট ফাইলে Store ডেফাইন করতে পারেন।
// app.js বা main.js এ Store কনফিগার
import { createStore } from 'framework7/lite';
const store = createStore({
state: {
counter: 0,
user: {
name: 'John Doe',
loggedIn: false,
},
},
getters: {
doubleCounter({ state }) {
return state.counter * 2;
},
},
actions: {
increment({ state }) {
state.counter += 1;
},
setUser({ state }, user) {
state.user = user;
},
},
});
var app = new Framework7({
root: '#app',
name: 'MyApp',
store: store, // Store যুক্ত করা
});
উপরের কোডে:
- state: অ্যাপ্লিকেশনের নির্দিষ্ট ডেটা রাখতে ব্যবহার করা হয়।
- getters: স্টেট থেকে ডেরাইভড ডেটা (Derived Data) পেতে হেল্প করে।
- actions: state আপডেট করার জন্য ব্যবহার করা হয়। এগুলো সাধারণত ফাংশন, যা state-কে সরাসরি মিউটেট করে।
Store থেকে ডেটা Access করা
Store এ সংরক্ষিত ডেটা আপনার অ্যাপের যেকোনো কম্পোনেন্ট বা পেজ থেকে অ্যাক্সেস করা যায়। আপনি app.store.state এর মাধ্যমে সরাসরি state পেতে পারেন, অথবা getters ব্যবহার করতে পারেন।
// সরাসরি state থেকে অ্যাক্সেস
console.log(app.store.state.counter);
// getters ব্যবহার করে ডেটা অ্যাক্সেস
console.log(app.store.getters.doubleCounter);
Store আপডেট করা
Store এর state আপডেট করতে actions ব্যবহার করা হয়। actions সাধারণত state-কে সরাসরি পরিবর্তন করে।
// counter ইনক্রিমেন্ট করা
app.store.dispatch('increment');
// user সেট করা
app.store.dispatch('setUser', { name: 'Jane Doe', loggedIn: true });
কম্পোনেন্টে Store এর ব্যবহার
যদি আপনি Framework7 Vue অথবা React ইন্টিগ্রেশন ব্যবহার করেন, তবে কম্পোনেন্টে Store এর state ও actions সহজে ব্যবহার করা যায়। Core ভার্সনের ক্ষেত্রে জাভাস্ক্রিপ্ট ইভেন্ট বা পদ্ধতি ব্যবহার করতে হয়।
Vue উদাহরণ:
<template>
<div class="page">
<div class="navbar">
<div class="title">Counter: {{ $f7.store.state.counter }}</div>
</div>
<div class="page-content">
<p>Double: {{ $f7.store.getters.doubleCounter }}</p>
<button @click="$f7.store.dispatch('increment')">Increment</button>
</div>
</div>
</template>
React উদাহরণ:
function HomePage(props) {
const { store } = props.f7;
return (
<div className="page">
<div className="navbar">
<div className="title">Counter: {store.state.counter}</div>
</div>
<div className="page-content">
<p>Double: {store.getters.doubleCounter}</p>
<button onClick={() => store.dispatch('increment')}>Increment</button>
</div>
</div>
);
}
Store এর উপকারিতা
- অ্যাপ্লিকেশন জুড়ে ডেটার কনসিস্টেন্সি:
Store ব্যবহার করে অ্যাপের বিভিন্ন অংশে একই ডেটা শেয়ার করা সহজ হয়। - সেন্ট্রালাইজড স্টেট ম্যানেজমেন্ট:
অ্যাপের সব স্টেট এক জায়গায় থাকলে ডিবাগিং, আপডেট এবং মেইনটেনেন্স সহজ হয়। - Vuex বা Redux ছাড়াই স্টেট ম্যানেজমেন্ট:
Framework7 Store ব্যবহার করে বাইরের লাইব্রেরি ছাড়াই স্টেট ম্যানেজমেন্ট করা যায়।
Framework7 Store ব্যবহার করে সহজেই অ্যাপের স্টেট ম্যানেজ করতে পারেন। এটি অ্যাপ্লিকেশন জুড়ে ডেটা সিঙ্ক্রোনাইজেশন, ডিবাগিং, এবং মেইনটেনেন্সকে আরও সুসংগঠিত ও সহজ করে তোলে।
Read more
