ভিউক্স ক্রিয়া থেকে প্রতিশ্রুতি ফিরিয়ে দেওয়া

Question

আমি সম্প্রতি জিউকিউ থেকে জিনিসগুলি আরও কাঠামোগত কাঠামোতে ভিউজেএস হিসাবে স্থানান্তরিত করতে শুরু করেছি এবং আমি এটি পছন্দ করি!

ধারণাগতভাবে, ভেক্স আমার জন্য একটি দৃষ্টান্ত বদল হয়ে উঠেছে, তবে আমি আত্মবিশ্বাসী যে আমি এখন এটি সম্পর্কে কী জানি এবং সম্পূর্ণরূপে এটি পেয়েছি! তবে বেশিরভাগ বাস্তবায়নের দৃষ্টিকোণ থেকে কয়েকটি ধূসর অঞ্চল রয়েছে।

এটি আমি ডিজাইন করে ভাল বলে মনে করি, তবে এটি ইউনি-দিকনির্দেশক ডেটা প্রবাহের ভেক্স চক্রের সাথে বিরোধিতা করে কিনা তা জানেন না ।

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

Answer 1

actionsভুয়েজে অ্যাসিনক্রোনাস হয়। কলিং ফাংশনটি (ক্রিয়াকলাপের সূচক) কোনও ক্রিয়া সম্পন্ন হয়েছে তা জানার একমাত্র উপায় - একটি প্রতিশ্রুতি ফিরিয়ে দেওয়া এবং পরে এটি সমাধান করা।

এখানে একটি উদাহরণ রয়েছে: myActionএকটি প্রত্যাবর্তন করে Promise, একটি এইচটিপি কল দেয় এবং Promiseপরে সংশোধন করে বা প্রত্যাখ্যান করে - সমস্ত অ্যাসিনক্রোনাসলি

actions: {
    myAction(context, data) {
        return new Promise((resolve, reject) => {
            // Do something here... lets say, a http call using vue-resource
            this.$http("/api/something").then(response => {
                // http success, call the mutator and change something in state
                resolve(response);  // Let the calling function know that http is done. You may send some data back
            }, error => {
                // http failed, let the calling function know that action did not work out
                reject(error);
            })
        })
    }
}

এখন, যখন আপনার ভ্যু উপাদানটি শুরু myActionকরবে, এটি এই প্রতিশ্রুতিবদ্ধ বস্তুটি পাবে এবং এটি সফল হয়েছে কিনা তা জানতে পারে। ভ্যু উপাদানটির জন্য এখানে কিছু নমুনা কোড রয়েছে:

export default {
    mounted: function() {
        // This component just got created. Lets fetch some data here using an action
        this.$store.dispatch("myAction").then(response => {
            console.log("Got some data, now lets show something in this component")
        }, error => {
            console.error("Got nothing from server. Prompt user to check internet connection and try again")
        })
    }
}

আপনি উপরে দেখতে পারেন যে এটি actionsফিরে আসার জন্য এটি অত্যন্ত উপকারী Promise। অন্যথায় অ্যাকশন ইনিশিয়েটারের কী হবে তা জানার কোনও উপায় নেই এবং যখন ব্যবহারকারী ইন্টারফেসে কিছু দেখানোর মতো জিনিসগুলি স্থিতিশীল থাকে।

এবং সম্পর্কিত একটি সর্বশেষ নোট mutators- যেমন আপনি যথাযথভাবে উল্লেখ করেছেন, সেগুলি সিঙ্ক্রোনাস। এগুলি স্টাফ পরিবর্তন করে stateএবং সাধারণত তাদের কাছ থেকে ডাকা হয় actions। মিশে কোন প্রয়োজন নেই Promisesসঙ্গে mutatorsহিসাবে, actionsহাতল যে অংশ।

সম্পাদনা করুন: ইউনি-দিকনির্দেশক ডেটা প্রবাহের ভিউেক্স চক্র সম্পর্কে আমার মতামত:

আপনি যদি this.$store.state["your data key"]আপনার উপাদানগুলির মতো ডেটা অ্যাক্সেস করেন তবে ডেটা প্রবাহটি ইউনি-দিকনির্দেশক।

কর্ম থেকে প্রাপ্ত প্রতিশ্রুতি কেবলমাত্র উপাদানটি জানতে পারে যে কর্মটি সম্পূর্ণ।

উপাদানটি হয় উপরোক্ত উদাহরণে প্রতিশ্রুতি সমাধানের ফাংশন থেকে ডেটা নিতে পারে (ইউনি-দিকনির্দেশক নয়, সুতরাং প্রস্তাবিত নয়), বা সরাসরি $store.state["your data key"]যা দিকনির্দেশনাযুক্ত এবং ভয়েক্স ডেটা লাইফাইসাইকেলের অনুসরণ করে।

উপরে উল্লিখিত অনুচ্ছেদটি Vue.set(state, "your data key", http_data)আপনার ক্রিয়াকলাপে একবার http কলটি শেষ হয়ে গেলে আপনার বিবর্তককে ব্যবহারগুলি অনুমান করে ।

Comments

"যেমন আপনি উপরে দেখতে পাচ্ছেন, প্রতিশ্রুতি ফিরিয়ে দেওয়া ক্রিয়াগুলির পক্ষে এটি অত্যন্ত উপকারী Otherwise অন্যথায় অ্যাকশন ইনিশিয়েটারের কী হবে তা জানার কোনও উপায় নেই এবং যখন ব্যবহারকারী ইন্টারফেসে কিছু দেখানোর মতো যথেষ্ট স্থিতিশীল রয়েছে।" আইএমও, এটি ভেক্সের পয়েন্টটি অনুপস্থিত। অ্যাকশন ইনিশিয়েটারের কী হবে তা জানার দরকার নেই । অ্যাসিঙ্ক্রোনাস ইভেন্ট থেকে ডেটা ফিরে আসার সাথে সাথে অ্যাকশনটি রাষ্ট্রটিকে পরিবর্তন করতে হবে এবং কোনও উপাদান প্রতিশ্রুতি নয়, ভুয়েজ স্টোরের রাজ্যের উপর ভিত্তি করে সেই স্তর পরিবর্তনের প্রতিক্রিয়া জানাবে।

— ceejayoz

@ceejayoz সম্মত, সমস্ত ডেটা অবজেক্টের জন্য রাজ্যের সত্যের একক উত্স হওয়া উচিত। তবে প্রতিশ্রুতি কর্মটি আরম্ভকারীকে আবার যোগাযোগ করার একমাত্র উপায়। উদাহরণস্বরূপ, যদি আপনি HTTP ব্যর্থতার পরে "আবার চেষ্টা করুন" বোতামটি দেখাতে চান তবে সেই তথ্যটি রাজ্যে যেতে পারে না, তবে কেবলমাত্র একটি এর মাধ্যমে যোগাযোগ করা যেতে পারে Promise.reject()।

— মণি

এটি সহজেই ভেক্স স্টোরের মধ্যে পরিচালনা করা যায়। ক্রিয়াটি নিজেই failedএমন কোনও মিউটরটিকে আগুন ধরিয়ে দিতে পারে state.foo.failed = trueযা সেট করে , যা উপাদানটি পরিচালনা করতে পারে। প্রতিশ্রুতিটি সেই অংশটির কাছে দেওয়ার দরকার নেই, এবং বোনাস হিসাবে, অন্য কোনও কিছু যা একই ব্যর্থতার প্রতিক্রিয়া দেখাতে চায় সে দোকান থেকেও এটি করতে পারে।

— ceejayoz

@ceejayoz ডক্সে কমপোজিং অ্যাকশনগুলি (শেষ বিভাগ) পরীক্ষা করুন - ভয়েক্স.ভয়েজস.অর্গ / এন / আপত্তিস এইচটিএমএল - ক্রিয়াকলাপগুলি অবিচ্ছিন্ন এবং সেইজন্য ডকস অনুসারে প্রতিশ্রুতি ফিরিয়ে দেওয়া একটি ভাল ধারণা। হয়তো উপরের $ HTTP ক্ষেত্রে নয়, তবে অন্য কোনও ক্ষেত্রে আমাদের কখন অ্যাকশন শেষ হবে তা জানতে হবে।

— মণি

@ ড্যানিয়েলপার্ক হ্যাঁ, "এটি নির্ভর করে" পরিস্থিতি এবং স্বতন্ত্র বিকাশকারী পছন্দসমূহের উপর। আমার ক্ষেত্রে, আমি {isLoading:true}আমার রাজ্যের মতো মধ্যবর্তী মানগুলি এড়াতে চেয়েছিলাম , এবং তাই প্রতিশ্রুতিগুলির আশ্রয় নিয়েছিলাম। আপনার পছন্দ বিভিন্ন হতে পারে। দিন শেষে, আমাদের উদ্দেশ্য হ'ল বিশৃঙ্খল-মুক্ত এবং রক্ষণাবেক্ষণযোগ্য কোডটি লিখতে। প্রতিশ্রুতিবদ্ধ উদ্দেশ্যটি অর্জন করে কিনা, বা ভয়েস রাজ্যটি - সিদ্ধান্ত নিতে পৃথক বিকাশকারী এবং দলকে রেখে দেওয়া হয়।

— মণি

Answer 2

কেবল একটি বদ্ধ বিষয় সম্পর্কিত তথ্যের জন্য: আপনাকে কোনও প্রতিশ্রুতি তৈরি করতে হবে না, অডিওগুলি নিজেই একটি ফেরত দেয়:

রেফ: https://forum.vuejs.org/t/how-to-resolve-a-promise-object-in-a-vuex-action-and-redirect-to-another-route/18254/4

উদাহরণ:

    export const loginForm = ({ commit }, data) => {
      return axios
        .post('http://localhost:8000/api/login', data)
        .then((response) => {
          commit('logUserIn', response.data);
        })
        .catch((error) => {
          commit('unAuthorisedUser', { error:error.response.data });
        })
    }

আরেকটি উদাহরণ:

    addEmployee({ commit, state }) {       
      return insertEmployee(state.employee)
        .then(result => {
          commit('setEmployee', result.data);
          return result.data; // resolve 
        })
        .catch(err => {           
          throw err.response.data; // reject
        })
    }

অ্যাসিঙ্ক-অপেক্ষার সাথে অন্য একটি উদাহরণ

    async getUser({ commit }) {
        try {
            const currentUser = await axios.get('/user/current')
            commit('setUser', currentUser)
            return currentUser
        } catch (err) {
            commit('setUser', null)
            throw 'Unable to fetch current user'
        }
    },

Comments

অক্ষের ক্রিয়াগুলি ইতিমধ্যে অ্যাসক্রোনাস হিসাবে ডিফল্ট হিসাবে অ্যাক্সিয়াস হওয়া উচিত?

— অ

Answer 3

ক্রিয়াকলাপ

ADD_PRODUCT : (context,product) => {
  return Axios.post(uri, product).then((response) => {
    if (response.status === 'success') {  
      context.commit('SET_PRODUCT',response.data.data)
    }
    return response.data
  });
});

উপাদান

this.$store.dispatch('ADD_PRODUCT',data).then((res) => {
  if (res.status === 'success') {
    // write your success actions here....
  } else {
     // write your error actions here...
  }
})

Comments

এই কাজটির কোনও কার্যকরী প্রতিক্রিয়া অপরিবর্তিত নেই

— নন্দ লাল

আমার মনে হয় আপনি ADD_PRODUCT ফাংশনে রিটার্ন যোগ করতে ভুলে গেছেন

— ভাস্কারাও গুমমিদি

"অক্ষ" মধ্যে ছোট হাতের অক্ষর "ক" হওয়া উচিত।

— বিগপ

আমি অক্সোইসকে কনস্ট হিসাবে নিয়েছি যা 'অ্যাক্সিয়ো' থেকে আমদানি করছে

— ভাস্কারাও গুমমিদি

Answer 4

টি এল: ডিআর;আপনার প্রয়োজন অনুসারে কেবল ক্রিয়াকলাপের প্রতিশ্রুতি ফেরান, তবে ডিআরওয়াই একই ক্রিয়াকলাপের শৃঙ্খলাবদ্ধ।

দীর্ঘ সময় ধরে আমি এটিও করেছি যে ফিরে আসা ক্রিয়াগুলি ইউনি-দিকনির্দেশক ডেটা প্রবাহের ভিউক্স চক্রের সাথে স্ববিরোধী।

তবে, এজ কেস আছে যেখানে আপনার ক্রিয়াকলাপ থেকে কোনও প্রতিশ্রুতি "প্রয়োজনীয়" হতে পারে।

এমন পরিস্থিতিটি কল্পনা করুন যেখানে 2 টি আলাদা উপাদান থেকে কোনও ক্রিয়া ঘটানো যেতে পারে এবং প্রতিটি ব্যর্থতার কেসটিকে আলাদাভাবে পরিচালনা করে। সেক্ষেত্রে স্টোরের বিভিন্ন পতাকা সেট করতে একজনকে প্যারামিটার হিসাবে কলার উপাদানটি পাস করতে হবে।

বোবা উদাহরণ

পৃষ্ঠা যেখানে ব্যবহারকারী নাবার এবং / প্রোফাইল পৃষ্ঠায় ব্যবহারকারী নামটি সম্পাদনা করতে পারে (যেটিতে নাবারটি রয়েছে)। উভয়ই একটি ক্রিয়া "ব্যবহারকারী নাম পরিবর্তন করুন" ট্রিগার করে যা অ্যাসিঙ্ক্রোনাস। যদি প্রতিশ্রুতি ব্যর্থ হয় তবে পৃষ্ঠাটি কেবল সেই উপাদানটিতে একটি ত্রুটি প্রদর্শন করবে যা ব্যবহারকারীর নামটি ব্যবহার করে ব্যবহারকারীকে পরিবর্তন করার চেষ্টা করছিল।

অবশ্যই এটি একটি বোবা উদাহরণ, তবে আমি কোডটিকে নকল করে এবং 2 টি ভিন্ন ক্রিয়ায় একই কল না করে এই সমস্যাটি সমাধান করার কোনও উপায় দেখছি না।

Answer 5

actions.js

const axios = require('axios');
const types = require('./types');

export const actions = {
  GET_CONTENT({commit}){
    axios.get(`${URL}`)
      .then(doc =>{
        const content = doc.data;
        commit(types.SET_CONTENT , content);
        setTimeout(() =>{
          commit(types.IS_LOADING , false);
        } , 1000);
      }).catch(err =>{
        console.log(err);
    });
  },
}

home.vue

<script>
  import {value , onCreated} from "vue-function-api";
  import {useState, useStore} from "@u3u/vue-hooks";

  export default {
    name: 'home',

    setup(){
      const store = useStore();
      const state = {
        ...useState(["content" , "isLoading"])
      };
      onCreated(() =>{
        store.value.dispatch("GET_CONTENT" );
      });

      return{
        ...state,
      }
    }
  };
</script>