லோக்கல் ஸ்டோரேஜ் மூலம் Vue செய்ய வேண்டிய செயலியை எவ்வாறு உருவாக்குவது

உங்களைப் போன்ற வாசகர்கள் MUO ஐ ஆதரிக்க உதவுகிறார்கள். எங்கள் தளத்தில் உள்ள இணைப்புகளைப் பயன்படுத்தி நீங்கள் வாங்கும் போது, நாங்கள் ஒரு இணை கமிஷனைப் பெறலாம். மேலும் படிக்க.

LocalStorage என்பது உலாவிகளில் கட்டமைக்கப்பட்ட ஒரு வலை API ஆகும், இது உங்கள் உள்ளூர் சாதனத்தில் முக்கிய மதிப்பு ஜோடிகளைச் சேமிக்க இணைய பயன்பாடுகளை அனுமதிக்கிறது. உங்கள் உலாவியை மூடிய பிறகும் தரவைச் சேமிப்பதற்கான எளிய முறையை இது வழங்குகிறது.

அன்றைய MUO வீடியோ உள்ளடக்கத்துடன் தொடர உருட்டவும்

பட்டியல்கள் மற்றும் பிற சிறிய அளவிலான தரவைச் சேமிக்க உங்கள் Vue பயன்பாடுகளுடன் LocalStorage ஐ ஒருங்கிணைக்கலாம். வெவ்வேறு பயன்பாட்டு அமர்வுகளில் பயனர் தரவைப் பராமரிக்க இது உங்களை அனுமதிக்கிறது.

இந்தப் டுடோரியலுக்குப் பிறகு, லோக்கல் ஸ்டோரேஜைப் பயன்படுத்தி தரவைச் சேமித்து, பணிகளைச் சேர்க்க மற்றும் அகற்றக்கூடிய செயல்பாட்டு Vue டு-டூ ஆப் உங்களிடம் இருக்கும்.

Vue செய்ய வேண்டிய பயன்பாட்டை அமைத்தல்

நீங்கள் குறியீட்டைத் தொடங்குவதற்கு முன், உங்களிடம் இருப்பதை உறுதிப்படுத்திக் கொள்ளுங்கள் உங்கள் சாதனத்தில் Node மற்றும் NPM நிறுவப்பட்டது .

ஒரு புதிய திட்டத்தை உருவாக்க, இந்த npm கட்டளையை இயக்கவும்:

npm create vue

தேவையான சார்புகளை உருவாக்கி நிறுவும் முன், உங்கள் புதிய Vue பயன்பாட்டிற்கான முன்னமைவைத் தேர்ந்தெடுக்க கட்டளை உங்களுக்குத் தேவைப்படும்.

இந்த செய்ய வேண்டிய பயன்பாட்டிற்கு கூடுதல் அம்சங்கள் தேவையில்லை, எனவே கிடைக்கக்கூடிய அனைத்து முன்னமைவுகளுக்கும் 'இல்லை' என்பதைத் தேர்ந்தெடுக்கவும்.

புதிய Vue பயன்பாட்டை உருவாக்கும் செயல்முறையைக் காட்டும் கட்டளை வரி

ப்ராஜெக்ட் அமைக்கப்பட்டவுடன், LocalStorage மூலம் செய்ய வேண்டிய பயன்பாட்டை உருவாக்கத் தொடங்கலாம்.

செய்ய வேண்டிய விண்ணப்பத்தை உருவாக்குதல்

இந்த டுடோரியலுக்கு, நீங்கள் இரண்டு Vue கூறுகளை உருவாக்குவீர்கள்: ஒட்டுமொத்த கட்டமைப்பிற்கான App.vue மற்றும் பணிகளின் பட்டியலைக் காண்பிக்க Todo.vue.

செய்ய வேண்டிய கூறுகளை உருவாக்குதல்

டோடோ கூறுக்கு, ஒரு புதிய கோப்பை உருவாக்கவும், src/components/Todo.vue . இந்த கோப்பு பணிகளின் பட்டியலின் கட்டமைப்பைக் கையாளும்.

பின்வரும் குறியீட்டை அதில் ஒட்டவும் Todo.vue கோப்பு:

<!-- Todo.vue --> 
<script setup> 
const props = defineProps(['todos']); 
const emit = defineEmits(['remove-todo']); 
 
const removeTodo = (index) => { 
  emit('remove-todo', index); 
}; 
</script> 
 
<template> 
  <div class="todo-list"> 
    <ul> 
      <li v-for="(todo, index) in props.todos" :key="index" class="todo-item"> 
        {{ todo.text }} 
        <button @click="removeTodo(index)" class="remove-button"> 
          Remove 
        </button> 
      </li> 
    </ul> 
  </div> 
</template>

மேலே உள்ள குறியீடு துணுக்கு அதன் கட்டமைப்பை விவரிக்கிறது அனைத்து கூறு. முறையே முட்டுகள் மற்றும் தனிப்பயன் நிகழ்வுகளின் மூலம் தரவைப் பெறுவதற்கும் நிகழ்வுகளை வெளியிடுவதற்கும் இது கூறுகளை அமைக்கிறது.

மேலும் விளக்க, குறியீடு பயன்படுத்துகிறது கூறுகளுக்கு இடையில் தொடர்புகொள்வதற்கான Vue முட்டுகள் பெற அனைத்து அதன் மூலக் கூறுகளிலிருந்து வரிசை, app.vue . பின்னர் அது பயன்படுத்துகிறது பட்டியல்களை வழங்குவதற்கான v-for உத்தரவு பெறப்பட்ட டோடோஸ் வரிசையின் மூலம் மீண்டும் செய்யவும்.

குறியீடு தனிப்பயன் நிகழ்வையும் வெளியிடுகிறது, அனைத்து நீக்க , ஒரு பேலோடுடன் குறியீட்டு . டோடோஸ் வரிசையில் ஒரு குறிப்பிட்ட குறியீட்டைக் கொண்டு ஒரு குறிப்பிட்ட பணியை அகற்ற இது உங்களை அனுமதிக்கிறது.

கிளிக் செய்யும் போது அகற்று பொத்தான், துணுக்கு தனிப்பயன் நிகழ்வின் உமிழ்வை பெற்றோர் கூறுகளுக்குத் தூண்டுகிறது. நீங்கள் பொத்தானைக் கிளிக் செய்துள்ளீர்கள் என்பதை இது குறிக்கிறது, இது App.vue என்ற பெற்றோர் கூறுக்குள் வரையறுக்கப்பட்ட தொடர்புடைய செயல்பாட்டைச் செயல்படுத்தத் தூண்டுகிறது.

பயன்பாட்டின் காட்சி கூறுகளை உருவாக்குதல்

தல app.vue டோடோ பயன்பாட்டை உருவாக்குவதைத் தொடர. தி செயலி கூறுகள் புதிய பணிகளைச் சேர்ப்பது மற்றும் வழங்குவதைக் கையாளும் அனைத்து கூறு.

பின்வருவனவற்றை ஒட்டவும் கையால் எழுதப்பட்ட தாள் உங்கள் App.vue கோப்பில் தடு:

2CFA7B6953650ECDA51C14831899236F5137AD8

மேலே உள்ள குறியீடு துணுக்கு தர்க்கத்தை கோடிட்டுக் காட்டுகிறது app.vue கூறு. துணுக்கை இறக்குமதி செய்கிறது அனைத்து கூறு மற்றும் Vue கலவை API உடன் எதிர்வினை மாறிகளை துவக்குகிறது.

குறியீடு டோடோ கூறு மற்றும் தி இறக்குமதியுடன் தொடங்குகிறது ref குறிப்பிட்ட பாதையில் இருந்து செயல்பாடு மற்றும் பார்வை , முறையே.

துணுக்கை பின்னர் ஒரு எதிர்வினை சரத்தை துவக்குகிறது, புதிய டோடோ , நீங்கள் உள்ளிடும் பணியைச் சேமிக்க. இது ஒரு வெற்று எதிர்வினையையும் துவக்குகிறது அனைத்து வரிசை, பணிகளின் பட்டியலை வைத்திருக்கும்.

தி addTodo செயல்பாடு புதிய பணிகளை todos வரிசையில் சேர்க்கிறது. newTodo காலியாக இல்லாவிட்டால், உறுதிப்படுத்தல் வரிசையில் அது தள்ளப்பட்டு, மேலும் பணிகளைச் சேர்க்க உங்களை அனுமதிக்க புதிய டோடோ மதிப்பை மீட்டமைக்கும்.

addTodo செயல்பாடும் செயல்படுத்துகிறது சேவ் டோலோக்கல் ஸ்டோரேஜ், இது டோடோஸ் வரிசையை உலாவியின் லோக்கல் ஸ்டோரேஜில் சேமிக்கிறது. துணுக்கு பயன்படுத்துகிறது தொகுப்பு பொருள் இதை அடைவதற்கான முறை மற்றும் சேமிப்பிற்கு முன் டோடோஸ் வரிசையை JSON சரமாக மாற்றுகிறது.

இது a என்றும் வரையறுக்கிறது டோடோவை அகற்று ஒரு எடுக்கும் செயல்பாடு முக்கிய ஒரு அளவுருவாக. தொடர்புடையவற்றை அகற்ற இந்த விசையைப் பயன்படுத்துகிறது அனைத்து டோடோஸ் வரிசையில் இருந்து. அகற்றப்பட்ட பிறகு, ரிமூவ்டோடோ செயல்பாடு லோக்கல் ஸ்டோரேஜ் தரவைப் புதுப்பிக்க saveToLocalStorage ஐ அழைக்கிறது.

இறுதியாக, குறியீடு பயன்படுத்துகிறது பெறுபொருள் Todos விசையுடன் முன்பு சேமித்த பணிகளைப் பெறுவதற்கு LocalStorage க்கு கிடைக்கும் முறை. உலாவியின் லோக்கல் ஸ்டோரேஜில் நீங்கள் பணிகளைச் சேமித்திருந்தால், குறியீடு அவற்றை டோடோஸ் வரிசையில் தள்ளும்.

இப்போது நீங்கள் App.vue கூறுகளின் தர்க்கத்தைக் கையாண்டீர்கள், பின்வரும் குறியீட்டை அதில் ஒட்டவும் டெம்ப்ளேட் பயனர் இடைமுகத்தை உருவாக்க உங்கள் Vue பயன்பாட்டைத் தடுக்கவும்:

<!-- App.vue --> 
<template> 
  <div class="app"> 
    <h1>To do List</h1> 
    <div class="add-todo"> 
      <input v-model="newTodo" @keyup.enter="addTodo" 
        placeholder="Add a new task" class="todo-input" /> 
 
      <button @click="addTodo" class="add-button">Add</button> 
    </div> 
    <Todo :todos="todos" @remove-todo="removeTodo" /> 
  </div> 
</template>

டெம்ப்ளேட் பயன்படுத்துகிறது v-மாதிரி , Vue இல் தரவு பிணைப்பு முறை உள்ளிடப்பட்ட டோடோவை பிணைக்க புதிய டோடோ எதிர்வினை சரம். வார்ப்புருவும் பயன்படுத்துகிறது v-on Vue இல் நிகழ்வுகளைக் கையாளுவதற்கான உத்தரவு அதன் சுருக்கெழுத்து மூலம் ( @ )

இரண்டையும் கேட்க இது v-on ஐப் பயன்படுத்துகிறது கிளிக் செய்யவும் மற்றும் நுழைய புதிய டோடோவை உறுதிப்படுத்தும் முக்கிய நிகழ்வுகள்.

இறுதியாக, டெம்ப்ளேட் பயன்படுத்துகிறது அனைத்து டோடோஸ் பட்டியலை வழங்க நீங்கள் முதலில் உருவாக்கிய கூறு. தி : அனைத்து தொடரியல் கடந்து செல்கிறது அனைத்து டோடோ கூறுக்கு முட்டுக்கட்டையாக வரிசை.

தி @அனைத்தையும் அகற்று தொடரியல் டோடோ கூறு உமிழப்படும் தனிப்பயன் நிகழ்வைப் பிடிக்க நிகழ்வு கேட்பவரை அமைக்கிறது டோடோவை அகற்று பதில் செயல்பாடு.

இப்போது நீங்கள் விண்ணப்பத்தை முடித்துவிட்டீர்கள், உங்கள் ரசனைக்கேற்ப ஸ்டைல் செய்ய நீங்கள் தேர்வு செய்யலாம். இந்த கட்டளையை இயக்குவதன் மூலம் உங்கள் பயன்பாட்டை முன்னோட்டமிடலாம்:

npm run dev

இது போன்ற ஒரு திரையை நீங்கள் பார்க்க வேண்டும்:

மற்றொரு கணினிக்கு கோப்புகளை எப்படி அனுப்புவது

புதிய பணியைச் சேர்ப்பதற்கான உள்ளீட்டுப் பெட்டியுடன் கூடிய அடிப்படை Todo பயன்பாடு மற்றும் ஏற்கனவே உள்ள ஐந்து பணிகளின் பட்டியலையும்

டோடோ பயன்பாட்டில் நீங்கள் பணிகளைச் சேர்க்கலாம் அல்லது அகற்றலாம். மேலும் என்னவென்றால், LocalStorage இன் ஒருங்கிணைப்புக்கு நன்றி, நீங்கள் பயன்பாட்டைப் புதுப்பிக்கலாம் அல்லது முழுவதுமாக வெளியேறலாம்; நீங்கள் செய்ய வேண்டிய பட்டியல் அப்படியே இருக்கும்.

உள்ளூர் சேமிப்பகத்தின் முக்கியத்துவம்

புதிய மற்றும் அனுபவம் வாய்ந்த டெவலப்பர்களுக்கு வலை பயன்பாடுகளில் உள்ளூர் சேமிப்பக ஒருங்கிணைப்பு அவசியம். லோக்கல் ஸ்டோரேஜ், பயனர் உருவாக்கிய உள்ளடக்கத்தைச் சேமித்து மீட்டெடுக்க அனுமதிப்பதன் மூலம், தரவு நிலைத்தன்மையை ஆரம்பநிலைக்கு அறிமுகப்படுத்துகிறது.

லோக்கல் ஸ்டோரேஜ் முக்கியமானது, ஏனெனில் உங்கள் பயனர் தரவு வெவ்வேறு அமர்வுகளில் அப்படியே இருப்பதை உறுதிசெய்ய முடியும். லோக்கல் ஸ்டோரேஜ் நிலையான சர்வர் தகவல்தொடர்புக்கான தேவையை நீக்குகிறது, இது வேகமான சுமை நேரங்களுக்கும் இணையப் பயன்பாடுகளில் மேம்பட்ட மறுமொழிக்கும் வழிவகுக்கிறது.