আমি আমার সমস্ত ফাংশন রাখতে চাই যা সার্ভারের সাথে কথা বলে এবং ভিউজেএস-এ একটি পুনরায় ব্যবহারযোগ্য ফাইলে ডেটা আনতে।
প্লাগইনগুলি সেরা বিকল্প বলে মনে হচ্ছে না। টেমপ্লেট কম উপাদান ..?
আমি আমার সমস্ত ফাংশন রাখতে চাই যা সার্ভারের সাথে কথা বলে এবং ভিউজেএস-এ একটি পুনরায় ব্যবহারযোগ্য ফাইলে ডেটা আনতে।
প্লাগইনগুলি সেরা বিকল্প বলে মনে হচ্ছে না। টেমপ্লেট কম উপাদান ..?
উত্তর:
মোট ৪ টি উপায় রয়েছে:
আমি এপিআই কল করার জন্য এইচটিটিপি ক্লায়েন্ট হিসাবে অক্ষগুলি ব্যবহার করছি , আমি gatewaysআমার srcফোল্ডারে একটি ফোল্ডার তৈরি করেছি এবং প্রতিটি ব্যাকএন্ডের জন্য ফাইল রেখেছি , অক্ষরের উদাহরণ তৈরি করেছি , যেমন নিম্নলিখিতগুলি
myApi.js
import axios from 'axios'
export default axios.create({
baseURL: 'http://localhost:3000/api/v1',
timeout: 5000,
headers: {
'X-Auth-Token': 'f2b6637ddf355a476918940289c0be016a4fe99e3b69c83d',
'Content-Type': 'application/json'
}
})
এখন আপনার উপাদানটিতে আপনার একটি ফাংশন থাকতে পারে যা নীচের মতো এপিআই থেকে ডেটা আনবে:
methods: {
getProducts () {
myApi.get('products?id=' + prodId).then(response => this.product = response.data)
}
}
আমি যদি আপনার একাধিক উপাদান এই পদ্ধতি পুনরায় ব্যবহার করতে চান নিই, আপনি ব্যবহার করতে পারেন mixins vue.js সংখ্যা:
মিক্সিনগুলি ভ্যু উপাদানগুলির জন্য পুনরায় ব্যবহারযোগ্য কার্যকারিতা বিতরণের একটি নমনীয় উপায়। একটি মিশ্রণ অবজেক্টে যে কোনও উপাদান বিকল্প থাকতে পারে। যখন কোনও উপাদান একটি মিক্সিন ব্যবহার করে, মিক্সিনে সমস্ত বিকল্প উপাদানটির নিজস্ব বিকল্পগুলিতে "মিশ্রিত" হবে।
সুতরাং আপনি মিক্সিনে একটি পদ্ধতি যুক্ত করতে পারেন এবং এটি সমস্ত উপাদানগুলিতে উপলব্ধ হবে যেখানে মিক্সিন মিশ্রিত হবে। নিম্নলিখিত উদাহরণ দেখুন:
// define a mixin object
var myMixin = {
methods: {
getProducts () {
myApi.get('products?id=' + prodId).then(response => this.product = response.data)
}
}
}
// define a component that uses this mixin
var Component = Vue.extend({
mixins: [myMixin]
})
// alternate way to have a mixin while initialising
new Vue({
mixins: [myMixin],
created: function () {
console.log('other code')
}
})
আমি বেশিরভাগই ভ্যূ রিসোর্স ব্যবহার করছি।
1.I নতুন ফাইল যেখানে আমি ব্যবহার এপিআই শেষবিন্দু সংযোগ না তৈরি Vue.http.xxx.So আসুন আমরা শেষবিন্দু আছে আউটপুট আপনার প্রকল্পের মধ্যে posts.Create নতুন ডিরেক্টরি, আমি এটা কল দিন services, এবং তারপর ফাইল নামক তৈরি PostsService.js- এই ধরনের তথ্যই দেখায়:
import Vue from 'vue'
export default {
get() {
return Vue.http.get('/api/posts)
}
}
তারপরে আমি সেই পরিষেবাটিতে যেতে চাই যেখানে আমি এই পরিষেবাটি ব্যবহার করতে চাই এবং এটি আমদানি করি
import PostsService from '../services/PostsService'
export default {
data() {
return {
items: []
}
},
created() {
this.fetchPosts()
},
methods: {
fetchPosts() {
return PostsService.get()
.then(response => {
this.items = response.data
})
}
}
}
এই পদ্ধতির সম্পর্কে আরও তথ্যের জন্য, গিটহাব https://github.com/bedakb/vuewp/tree/master/public/app/themes/vuewp/app এ আমার রেপোটি নির্দ্বিধায় চেক করুন
আমি এমন একটি API সরবরাহকারী তৈরি করার পরামর্শ দিচ্ছি যা আপনি নিজের অ্যাপ্লিকেশন থেকে যে কোনও জায়গা থেকে অ্যাক্সেস করতে পারেন।
কেবল একটি src/utilsফোল্ডার তৈরি করুন এবং এর অভ্যন্তরে একটি ফাইল নামে পরিচিত api.js।
এতে, আপনার মোড়কটি রফতানি করুন যা কীভাবে আপনার API এর সাথে কোনও অবজেক্ট বা ES6 স্ট্যাটিক শ্রেণি হিসাবে যোগাযোগ করতে জানে (আপনি যদি ক্লাসগুলি সম্পর্কে ভীত না হন তবে পরে কীভাবে দেখায় এবং কাজ করে তা আমি পছন্দ করি)। এই সরবরাহকারী আপনার পছন্দ মতো যে কোনও এইচটিটিপি অনুরোধ লাইব্রেরি ব্যবহার করতে পারেন এবং আপনি পুরো কোডবেসটি শিকারের পরিবর্তে কোনও একক ফাইল (এইটি) পরিবর্তন করে সহজেই পরে তা অদলবদল করতে পারেন। এখানে অক্ষর ব্যবহারের একটি উদাহরণ এখানে ধরে নিই api.example.com/v1যে এসএসএল ব্যবহার করে আমাদের কাছে একটি REST এপিআই উপলব্ধ রয়েছে :
import axios from 'axios'
import { isProduction, env } from '@/utils/env'
const http = null // not possible to create a private property in JavaScript, so we move it outside of the class, so that it's only accessible within this module
class APIProvider {
constructor ({ url }) {
http = axios.create({
baseURL: url,
headers: { 'Content-Type': 'application/json' }
})
}
login (token) {
http.defaults.headers.common.Authorization = `Bearer ${token}`
}
logout () {
http.defaults.headers.common.Authorization = ''
}
// REST Methods
find ({ resource, query }) {
return http.get(resource, {
params: query
})
}
get ({ resource, id, query }) {
return http.get(`${resource}/${id}`, {
params: query
})
}
create ({ resource, data, query }) {
return http.post(resource, data, {
params: query
})
}
update ({ resource, id, data, query }) {
return http.patch(`${resource}/${id}`, data, {
params: query
})
}
destroy ({ resource, id }) {
return http.delete(`${resource}/${id}`)
}
}
export default new APIProvider({
url: env('API_URL') // We assume 'https://api.example.com/v1' is set as the env variable
})
এর পরে, আপনার main.jsফাইলে বা অন্য যে কোনও জায়গায় আপনি ভ্যু অ্যাপ্লিকেশনটি বুটস্ট্র্যাপ করুন, নিম্নলিখিতটি করুন:
import api from '@/src/utils/api'
Vue.$api = api
Object.defineProperty(Vue.prototype, '$api', {
get () {
return api
}
})
এখন আপনি আপনার ভ্যু অ্যাপ্লিকেশন এবং যে কোনও জায়গায় আপনি ভ্যু নিজেই আমদানি করতে পারবেন এটিকে অ্যাক্সেস করতে পারবেন:
<template>
<div class="my-component">My Component</div
</template>
<script>
export default {
name: 'MyComponent',
data () {
return {
data: []
}
},
async created () {
const response = await this.$api.find({ resource: 'tasks', query: { page: 2 } })
this.data = response.data
}
}
</script>
বা:
// actions.js from Vuex
import Vue from 'vue'
export async function fetchTasks ({ commit }) {
const response = await Vue.$api.find({ resource: 'tasks', query: { page: 2 } })
commit('SAVE_TASKS', response.data)
return response
}
আশাকরি এটা সাহায্য করবে.
আমি মনে করি আপনার সহজ প্রশ্নের উত্তর হ'ল কোনও ES6 মডিউল ফাংশন (আনগুলার শ্রেণিতে পদ্ধতির সমতুল্য) এবং ES6 আমদানি এবং রফতানি ব্যবহার করে সরাসরি উপাদানগুলিতে তাদের আমদানি করতে পারে। উপাদানগুলিতে ইনজেকশনের মতো কোনও পরিষেবা নেই।
আপনি নিজের পরিষেবা তৈরি করতে পারেন যেখানে আপনি আপনার সমস্ত এইচটিটিপি সার্ভার কল রাখতে পারেন এবং তারপরে সেই উপাদানগুলিতে যেখানে আপনি সেগুলি ব্যবহার করতে চান তা আমদানি করতে পারেন।
জটিল রাষ্ট্র পরিচালনার অ্যাপ্লিকেশনগুলির জন্য ভ্যুেক্সকে ব্যবহার করা সেরা কারণ ভিউেক্সে আপনি সবগুলি অ্যাসিঙ্ক কলকে এমন ক্রিয়াকলাপের মাধ্যমে পরিচালনা করতে সক্ষম হন যা সর্বদা সংশ্লেষপূর্ণভাবে চালিত হয় এবং ফলস্বরূপ একবার পরিবর্তনের পরে প্রতিশ্রুতি দেয় utation পরিবর্তনটি সরাসরি রাজ্যের সাথে যোগাযোগ করবে এবং আপডেট করবে এটি অপরিবর্তনীয় পদ্ধতিতে (যা পছন্দসই)। এটি রাষ্ট্রীয় পন্থা।
পাশাপাশি অন্যান্য পন্থা আছে। তবে এগুলিই আমি আমার কোড অনুসরণ করি।