vue.js 2 কীভাবে ভুেক্স থেকে স্টোরের মান দেখতে হয়


168

আমি ব্যবহার করছি vuexএবং vuejs 2একসাথে।

আমি এতে নতুন vuex, আমি একটি storeপরিবর্তনশীল পরিবর্তন দেখতে চাই ।

আমি watchআমার মধ্যে ফাংশন যোগ করতে চানvue component

আমার এ পর্যন্ত যা আছে:

import Vue from 'vue';
import {
  MY_STATE,
} from './../../mutation-types';

export default {
  [MY_STATE](state, token) {
    state.my_state = token;
  },
};

এর মধ্যে কোনও পরিবর্তন আছে কিনা তা জানতে চাই my_state

আমি কীভাবে store.my_stateআমার ভয়েজ উপাদানটি দেখতে পারি ?


একটি Vuejs প্লাগইন যা Chrome দিয়ে আসে এটা কাজে লাগবে ব্যবহার
আকাশ পান্ডে

উত্তর:


206

ধরা যাক, উদাহরণস্বরূপ, আপনার একটি ফলের ঝুড়ি রয়েছে এবং প্রতিবার আপনি ঝুড়ি থেকে কোনও ফল যুক্ত বা সরিয়ে ফেলার সময় আপনি (1) ফলের গণনা সম্পর্কিত তথ্য প্রদর্শন করতে চান তবে আপনি (2) অবহিত হতে চান কিছু অভিনব ফ্যাশনে ফলের গণনা ...

ফল গোনা-component.vue

<template>
  <!-- We meet our first objective (1) by simply -->
  <!-- binding to the count property. -->
  <p>Fruits: {{ count }}</p>
</template>

<script>
import basket from '../resources/fruit-basket'

export default () {
  computed: {
    count () {
      return basket.state.fruits.length
      // Or return basket.getters.fruitsCount
      // (depends on your design decisions).
    }
  },
  watch: {
    count (newCount, oldCount) {
      // Our fancy notification (2).
      console.log(`We have ${newCount} fruits now, yay!`)
    }
  }
}
</script>

দয়া করে নোট করুন, watchঅবজেক্টে ফাংশনের নামটি অবশ্যই অবজেক্টের ফাংশনের নামের সাথে মেলে computed। উপরের উদাহরণে নামটি রয়েছে count

দেখা হওয়া সম্পত্তির নতুন এবং পুরানো মানগুলি পরামিতি হিসাবে ওয়াচ কলব্যাক (গণনা ফাংশন) এ পাঠানো হবে।

ঝুড়ির দোকানটি দেখতে দেখতে এমন হতে পারে:

ফল-basket.js

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

const basket = new Vuex.Store({
  state: {
    fruits: []
  },
  getters: {
    fruitsCount (state) {
      return state.fruits.length
    }
  }
  // Obviously you would need some mutations and actions,
  // but to make example cleaner I'll skip this part.
})

export default basket

আপনি নিম্নলিখিত সংস্থানগুলিতে আরও পড়তে পারেন:


আমি কেবল ভাবছি যে watchক্রিয়াটি দুটি ধাপে বিভক্ত হয়ে গেলে আমি কী করণীয়: 1) প্রথমে, ইচ্ছা ডেটাটি ক্যাশে করা হয়েছে কিনা তা পরীক্ষা করা এবং এটি কেবল ক্যাশেড ডেটা ফিরিয়ে দেয় কি না; 2) যদি ক্যাশে ব্যর্থ হয় তবে ডেটা আনার জন্য আমার একটি এসিঙ্ক এজ্যাক্স অ্যাকশন দরকার, তবে এটি মনে হয় actionএটির কাজ। আমার প্রশ্নের প্রত্যাশাটি অর্থবহ, ধন্যবাদ!
1Cr18Ni9

এর কী কী সুবিধা হবে, মাইকা 5 এর উত্তরের উপর, যা কেবলমাত্র স্টোরের মূল্যের উপর উপাদানটির উপর নজর রাখে? এটি রক্ষণাবেক্ষণের জন্য কম কোড আছে।
এক্সোসেন্ট্রিক

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

@ 1Cr18Ni9 আমি মনে করি ক্যাচিং উপাদান উপাদানগুলির সাথে সম্পর্কিত নয়। আপনি অতি-প্রকৌশল এমন কিছু শেষ করবেন যা সত্যিই সহজ হওয়া উচিত (ডেটা আনার এবং এটিকে দেখার জন্য আবদ্ধ)। ইতিমধ্যে ব্রাউজারে ক্যাচিং প্রয়োগ করা হয়েছে। আপনি সার্ভার থেকে সঠিক শিরোনাম প্রেরণ করে এর সুবিধা নিতে পারেন। এখানে সরল ব্যাখ্যা: csswizardry.com/2019/03/cache-control-for-cilianians । আপনি সার্ভিস ওয়ার্কার্সের দিকেও নজর দিতে পারেন যা ইন্টারনেট সংযোগ ছাড়াই ওয়েবসাইটকে কাজ করার অনুমতি দেয়।
আনস্টাজি

61

রাষ্ট্র পরিবর্তন শুনতে আপনার উপাদানগুলির পর্যবেক্ষক ব্যবহার করা উচিত নয়। আমি আপনাকে getters ফাংশন ব্যবহার এবং তারপরে আপনার উপাদানগুলির মধ্যে ম্যাপ করার পরামর্শ দিচ্ছি।

import { mapGetters } from 'vuex'

export default {
  computed: {
    ...mapGetters({
      myState: 'getMyState'
    })
  }
}

আপনার দোকানে:

const getters = {
  getMyState: state => state.my_state
}

this.myStateআপনার উপাদান ব্যবহার করে আপনার স্টোরে করা কোনও পরিবর্তন শুনতে পারা উচিত ।

https://vuex.vuejs.org/en/getters.html#the-mapgetters-helper


1
আমি মানচিত্রপত্রগুলি কীভাবে প্রয়োগ করতে পারি তা জানি না। আপনি কি আমাকে একটি উদাহরণ নির্দেশ করতে পারেন? এটি একটি বড় সাহায্য হবে। আমি এই মুহুর্তে কেবল গুং উত্তরটি প্রয়োগ করেছি। TY
Rbex

1
@Rbex "mapGetters" হ'ল 'লাইব্রেরি'র অংশ। আপনার এটি প্রয়োগ করার দরকার নেই।
গ্যাব্রিয়েল রবার্ট

69
এই উত্তরটি ঠিক ভুল। তাকে আসলে গণিত বৈশিষ্ট্যগুলি দেখতে হবে।
জুয়ান

15
একবার ডাকারীর জন্য এই সময়টি কেবল পুনরুদ্ধার করবে। আপনি যদি সেই সম্পত্তিটি অন্য কোনও উপাদান থেকে রাষ্ট্র পরিবর্তন প্রতিফলিত করতে চান তবে আপনাকে এটি দেখতে হবে।
সি টিয়ার্নি

3
কেন "রাষ্ট্রীয় পরিবর্তন শোনার জন্য আপনার উপাদানগুলির পর্যবেক্ষক ব্যবহার করা উচিত নয়"? এখানে আমি উদাহরণস্বরূপ আপনি যদি ভাবেন না, যদি আমি রাজ্য থেকে টোকেনটি দেখতে চাই এবং যখন এটি অন্য পৃষ্ঠায় পুনঃনির্দেশিত হয়। সুতরাং, আপনার কিছু করা দরকার need এটি জানতে আপনার আরও অভিজ্ঞতার প্রয়োজন হতে পারে।
Shlomi Levi

46

এটি এতটা সহজ:

watch: {
  '$store.state.drawer': function() {
    console.log(this.$store.state.drawer)
  }
}

6
এখানে যে কোনও উত্তরের চেয়ে এটি স্পষ্টতই খারাপ দৃষ্টি ... এটি করার বিরুদ্ধে কোন যুক্তি আছে ..?
ইনিগো

19
এটি খুব সহজ তাই জেএস মতো দেখায় না, জেএস আরও জটিল হতে হবে।
খনন করুন

1
এটি আরও সরল হবেfunction(n) { console.log(n); }
WofWca

2
দুর্দান্ত শীতল। এই পদ্ধতির যে কোনও ত্রুটি পাশাপাশি আগ্রহী। এখনও পর্যন্ত এটি ভাল কাজ করছে বলে মনে হচ্ছে।
namero999

1
সিরিয়াসলি। এটি গ্রহণযোগ্য উত্তরের চেয়ে অনেক ভাল বলে মনে হচ্ছে, যার জন্য ঘড়ি এবং গণনাতে ফাংশনটির নকল করা দরকার। কোনও বিশেষজ্ঞ কেন বা কেন এইভাবে করবেন না সে সম্পর্কে মন্তব্য করতে পারে?
এক্সোসেন্ট্রিক

42

উপরে উল্লিখিত হিসাবে সরাসরি স্টোরে পরিবর্তনগুলি দেখা ভাল ধারণা নয়

তবে কিছু খুব বিরল ক্ষেত্রে এটি কারও পক্ষে কার্যকর হতে পারে, তাই আমি এই উত্তরটি রেখে দেব। অন্যদের ক্ষেত্রে, দয়া করে @ গ্যাব্রিয়েল-রবার্টের উত্তরটি দেখুন

আপনি এটি মাধ্যমে করতে পারেন state.$watchcreatedউপাদানটিতে এটি আপনার (বা যেখানে আপনার এটি সম্পাদন করতে হবে) পদ্ধতিতে যুক্ত করুন

this.$store.watch(
    function (state) {
        return state.my_state;
    },
    function () {
        //do something on data change
    },
    {
        deep: true //add this if u need to watch object properties change etc.
    }
);

আরও বিশদ: https://vuex.vuejs.org/api/#watch


3
আমি মনে করি না সরাসরি রাষ্ট্র দেখা ভাল ধারণা। আমাদের পাওয়া উচিত। vuex.vuejs.org/en/getters.html#the-mapgetters-helper
গ্যাব্রিয়েল রবার্ট

14
@ গ্যাব্রিয়েলরোবার্ট আমি মনে করি উভয়ের জন্যই জায়গা আছে। আপনার যদি মানচিত্রের স্টেট ইত্যাদির সাথে একটি গুণিত মান ব্যবহার করে টেম্পলেট শর্তগুলির ভিত্তিতে প্রতিক্রিয়াশীল পরিবর্তন করতে হয় তবে তা বোঝা যায়। তবে অন্যথায়, কোনও উপাদানগুলির মধ্যে এমনকি প্রবাহ নিয়ন্ত্রণের জন্য, আপনার একটি সম্পূর্ণ নজর রাখা দরকার। আপনি ঠিক বলেছেন, আপনার সরল উপাদান পর্যবেক্ষক ব্যবহার করা উচিত নয়, তবে রাষ্ট্র। ঘড়ি এই ব্যবহারের ক্ষেত্রে তৈরি করা হয়েছে
রোবার্তো টমস

14
প্রত্যেকে এর উল্লেখ করে, কিন্তু কেউ কেন বলেনা! আমি একটি ভয়েস স্টোর তৈরির চেষ্টা করছি যা পরিবর্তনের পরে ডিবিতে স্বয়ংক্রিয়ভাবে সিঙ্ক্রোনাইজ হয়। আমার মনে হয় দোকানে নজরদারিরা সবচেয়ে ঝগড়াবিহীন উপায়! আপনি কি মনে করেন? তবুও ভাল ধারণা না?
মেসকেব

16

আমার মনে হয় প্রশ্নকর্তা ভেক্সের সাথে ঘড়িটি ব্যবহার করতে চান।

this.$store.watch(
      (state)=>{
        return this.$store.getters.your_getter
      },
      (val)=>{
       //something changed do something

      },
      {
        deep:true
      }
      );

13

এই সব মানুষ যে getters সঙ্গে তাদের সমস্যা সমাধান করতে পারে না এবং আসলে সত্যিই একটি প্রহরী, যেমন (দেখুন প্রয়োজন অ Vue তৃতীয় পক্ষের কাপড় সাথে কথা বলতে হয় Vue ওয়াচার্স যখন প্রহরী ব্যবহার করার জন্য)।

ভ্যু উপাদানটির পর্যবেক্ষক এবং গণিত মান উভয়ই গণিত মানগুলিতে কাজ করে। সুতরাং এটি ভয়েক্সের সাথে আলাদা নয়:

import { mapState } from 'vuex';

export default {
    computed: {
        ...mapState(['somestate']),
        someComputedLocalState() {
            // is triggered whenever the store state changes
            return this.somestate + ' works too';
        }
    },
    watch: {
        somestate(val, oldVal) {
            // is triggered whenever the store state changes
            console.log('do stuff', val, oldVal);
        }
    }
}

যদি এটি কেবল স্থানীয় এবং বৈশ্বিক রাষ্ট্রের সংমিশ্রণের বিষয়ে হয় তবে ম্যাপস্টেটের ডকটিও একটি উদাহরণ সরবরাহ করে:

computed: {
    ...mapState({
        // to access local state with `this`, a normal function must be used
        countPlusLocalState (state) {
          return state.count + this.localCount
        }
    }
})

দুর্দান্ত হ্যাক, কিন্তু খুব ক্লান্তিকর, আপনি কি মনে করেন না?
মার্টিয়ান2049

2
এটি যদি ডক্সে থাকে তবে এটি হ্যাক নয়, তাই না? তবে তারপরেও এটি ভ্যু / ভ্যুয়াক্সের পক্ষে পক্ষে-যুক্তি নয়
ডুব

8

আপনি যদি টাইপস্ক্রিপ্ট ব্যবহার করেন তবে আপনি এটি করতে পারেন:

import { Watch } from "vue-property-decorator";

..

@Watch("$store.state.something")
private watchSomething() {
   // use this.$store.state.something for access
   ...
}


কেন এই হ্রাস ছিল? সমাধানটি ভ্যু-ক্লাস-উপাদানগুলির জন্য এবং টু পুরানো মান-শ্রেণীর শৈলীর জন্য জিজ্ঞাসা করেছিল? আমি আগের পছন্দ। হতে পারে @ জাং সোল প্রবর্তনে উল্লেখ করতে পারে যে, এটি স্পষ্টভাবে ভ্যু-ক্লাস-উপাদানটির জন্য?
জ্যাকলিমারডিউর

: নোট নিশ্চিত কেন একটি টাইপ করা বিষয় প্রসাধক বাঞ্ছনীয় এই এক হিসাবে সহজ হিসাবে একটি Vue নেটিভ সমাধান হবে stackoverflow.com/a/56461539/3652783
yann_yinn

6

মান পরিবর্তনগুলি দেখে এবং সেট করে আপনার স্টোর ভেরিয়েবলের একটি স্থানীয় রাজ্য তৈরি করুন । ফর্ম-ইনপুট ভি-মডেলের জন্য স্থানীয় ভেরিয়েবল পরিবর্তনগুলি স্টোর ভেরিয়েবলটিকে সরাসরি রূপান্তরিত করে না ।

data() {
  return {
    localState: null
  };
 },
 computed: {
  ...mapGetters({
    computedGlobalStateVariable: 'state/globalStateVariable'
  })
 },
 watch: {
  computedGlobalStateVariable: 'setLocalState'
 },
 methods: {
  setLocalState(value) {
   this.localState = Object.assign({}, value);
  }
 }

5

স্টোর পরিবর্তনগুলি দেখার সর্বোত্তম উপায় হ'ল mapGettersগ্যাব্রিয়েল যেমন বলেছেন। তবে একটি কেস রয়েছে যখন আপনি এটির মাধ্যমে এটি করতে পারবেন না mapGettersযেমন আপনি প্যারামিটার ব্যবহার করে স্টোর থেকে কিছু পেতে চান:

getters: {
  getTodoById: (state, getters) => (id) => {
    return state.todos.find(todo => todo.id === id)
  }
}

সেক্ষেত্রে আপনি ব্যবহার করতে পারবেন না mapGetters। পরিবর্তে আপনি এরকম কিছু করার চেষ্টা করতে পারেন:

computed: {
    todoById() {
        return this.$store.getters.getTodoById(this.id)
    }
}

তবে দুর্ভাগ্যক্রমে পরিবর্তন করা todoById হলেই আপডেট করা হবেthis.id

আপনি যদি this.$store.watch গং দ্বারা সরবরাহিত ক্ষেত্রে ব্যবহারের সমাধানের ক্ষেত্রে উপাদানগুলির আপডেট চান । অথবা আপনার উপাদানটি সচেতনভাবে পরিচালনা করুন এবং আপডেট this.idকরার দরকার হলে আপডেট করুন todoById


ধন্যবাদ. এটি
হ'ল

5

আপনি যদি কেবল কোনও রাষ্ট্রের সম্পত্তি দেখতে চান এবং তারপরে সেই সম্পত্তিটির পরিবর্তন অনুসারে উপাদানটির মধ্যে কাজ করতে চান তবে নীচের উদাহরণটি দেখুন।

ইন store.js:

export const state = () => ({
 isClosed: false
})
export const mutations = {
 closeWindow(state, payload) {
  state.isClosed = payload
 }
}

এই দৃশ্যে, আমি এমন একটি booleanরাষ্ট্রীয় সম্পত্তি তৈরি করছি যা আমি অ্যাপ্লিকেশনটিতে বিভিন্ন জায়গায় পরিবর্তন করতে যাচ্ছি:

this.$store.commit('closeWindow', true)

এখন, যদি আমাকে সেই রাজ্যের সম্পত্তিটি অন্য কোনও উপাদানে দেখার দরকার হয় এবং তারপরে স্থানীয় সম্পত্তিটি পরিবর্তন করতে হয় তবে আমি নীচে হুকটিতে লিখতে চাই mounted:

mounted() {
 this.$store.watch(
  state => state.isClosed,
  (value) => {
   if (value) { this.localProperty = 'edit' }
  }
 )
}

প্রথমত, আমি রাষ্ট্রীয় সম্পত্তিতে একজন নজরদারি স্থাপন করছি এবং তারপরে কলব্যাক ফাংশনে আমি valueসেই সম্পত্তিটির পরিবর্তন করতে ব্যবহার করব localProperty

আমি আসা করি এটা সাহায্য করবে!


3

আপনি যখন রাজ্য পর্যায়ে দেখতে চান, এটি এইভাবে করা যেতে পারে:

let App = new Vue({
    //...
    store,
    watch: {
        '$store.state.myState': function (newVal) {
            console.log(newVal);
            store.dispatch('handleMyStateChange');
        }
    },
    //...
});

উপাদান থেকে রাষ্ট্রীয় ক্রিয়াকলাপ store.stateপরিবর্তনটি পরিচালনা করা ভাল ধারণা নয় dispatchকারণ আপনি যদি সেই উপাদানটি ব্যবহার করেন কেবল তখনই এই আচরণটি কাজ করে। এছাড়াও আপনি অসীম লুপ দিয়ে শেষ হতে পারে। ঘড়িতে store.stateখুব কমই ব্যবহার পরিবর্তন করেন, উদাহরণস্বরূপ যদি আপনি একটি উপাদানকে একটি পৃষ্ঠায় যে কিছু উপর ভিত্তি করে কর্ম করা উচিৎ আছে store.stateপাল্টে দিয়েছে, নির্ণিত mapState ব্যবহার দ্বারা পরিচালিত করতে পারে না শুধুমাত্র যেখানে আপনি তুলনা করতে পারবেন না newValueবনামoldValue
Januartha

@ জানুয়ার্থ এই সমস্যা সম্পর্কে আপনার পরামর্শ কী?
বিল্লাল বেগেরাদজ

@ এবং হ্যাঁ অবশ্যই এটির কাজ। আমি শুধু খেয়াল করতে চাই তুমি কেন ফোন কর store.dispatch? আপনি যদি store.mutations` এর store.stateজন্য পরিবর্তনটি পরিচালনা করতে চান store' why not handle it inside ?
জানুয়ার্থ

@ বিল্লালবেগুআরএডিজে আমি ডাবের সমাধানটি আরও ক্লিনার
জানুয়ার্থ

@ জানুয়ার্থ, কারণ কোনও মিউটেশন করার আগে একটি অজ্যাক্স কল আসতে পারে, এজন্য আমি store.dispatchপ্রথমে ব্যবহার করি । উদাহরণস্বরূপ, যখনই $store.state.countryপরিবর্তন হয় আমি কোনও দেশ থেকে সমস্ত শহর পেতে চাই , তাই আমি এটি পর্যবেক্ষকগুলিতে যুক্ত করব। তারপরে আমি একটি এজাক্স কল store.dispatch('fetchCities')লিখব: ইন আমি লিখি:axios.get('cities',{params:{country: state.country }}).then(response => store.commit('receiveCities',response) )
অ্যান্ডি

2

আপনি Vuex সংমিশ্রণ ব্যবহার করতে পারেন ক্রিয়া , getters , কম্পিউটেড বৈশিষ্ট্য এবং প্রহরী একটি Vuex রাষ্ট্র মান পরিবর্তন শোনার জন্য।

এইচটিএমএল কোড:

<div id="app" :style='style'>
  <input v-model='computedColor' type="text" placeholder='Background Color'>
</div>

জাভাস্ক্রিপ্ট কোড:

'use strict'

Vue.use(Vuex)

const { mapGetters, mapActions, Store } = Vuex

new Vue({
    el: '#app',
  store: new Store({
    state: {
      color: 'red'
    },
    getters: {
      color({color}) {
        return color
      }
    },
    mutations: {
      setColor(state, payload) {
        state.color = payload
      }
    },
    actions: {
      setColor({commit}, payload) {
        commit('setColor', payload)
      }
    }
  }),
  methods: {
    ...mapGetters([
        'color'
    ]),
    ...mapActions([
        'setColor'
    ])
  },
  computed: {
    computedColor: {
        set(value) {
        this.setColor(value)
      },
      get() {
        return this.color()
      }
    },
    style() {
        return `background-color: ${this.computedColor};`
    }
  },
  watch: {
    computedColor() {
        console.log(`Watcher in use @${new Date().getTime()}`)
    }
  }
})

জেএসফিডাল ডেমো দেখুন


1

আপনি স্টোর মিউটেশনগুলির সাবস্ক্রাইব করতে পারেন:

store.subscribe((mutation, state) => {
  console.log(mutation.type)
  console.log(mutation.payload)
})

https://vuex.vuejs.org/api/#subscribe


আপনি এটিকে আপনার উপাদানগুলির পূর্ববর্তী মাউন্ট () হুকটিতে ফায়ার করতে পারেন তারপরে যদি একটি বিবৃতি দিয়ে আগত পরিবর্তনগুলি ফিল্টার করে। যেমন যদি (mutation.type == "নাম / SET_NAMES") {... কিছু করুন}
আলেজান্দ্রো

1

উপাদানটির ভিতরে, একটি গণিত ফাংশন তৈরি করুন

computed:{
  myState:function(){
    return this.$store.state.my_state; // return the state value in `my_state`
  }
}

এখন যেমন গণনা করা ফাংশন নাম, দেখা যেতে পারে

watch:{
  myState:function(newVal,oldVal){
    // this function will trigger when ever the value of `my_state` changes
  }
}

vuexরাজ্যে করা পরিবর্তনগুলি my_stateগণনা করা ফাংশনটিতে প্রতিফলিত হবে myStateএবং ঘড়ির কাজটি ট্রিগার করবে।

যদি রাজ্যে my_stateনেস্টেড ডেটা থাকে, তবে handlerবিকল্পটি আরও সহায়তা করবে

watch:{
  myState:{
    handler:function(newVal,oldVal){
      // this function will trigger when ever the value of `my_state` changes
    },
    deep:true
  }
}

এটি স্টোরের সমস্ত নেস্টেড মানগুলি দেখবে my_state


0

স্টোর থেকে সরাসরি রাজ্য পেতে আপনি নিজের মান উপাদানটিতে ম্যাপস্টেটও ব্যবহার করতে পারেন।

আপনার উপাদান:

computed: mapState([
  'my_state'
])

my_stateদোকান থেকে একটি পরিবর্তনশীল যেখানে ।


0

====== store =====
import Vue from 'vue'
import Vuex from 'vuex'
import axios from 'axios'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    showRegisterLoginPage: true,
    user: null,
    allitem: null,
    productShow: null,
    userCart: null
  },
  mutations: {
    SET_USERS(state, payload) {
      state.user = payload
    },
    HIDE_LOGIN(state) {
      state.showRegisterLoginPage = false
    },
    SHOW_LOGIN(state) {
      state.showRegisterLoginPage = true
    },
    SET_ALLITEM(state, payload) {
      state.allitem = payload
    },
    SET_PRODUCTSHOW(state, payload) {
      state.productShow = payload
    },
    SET_USERCART(state, payload) {
      state.userCart = payload
    }
  },
  actions: {
    getUserLogin({ commit }) {
      axios({
        method: 'get',
        url: 'http://localhost:3000/users',
        headers: {
          token: localStorage.getItem('token')
        }
      })
        .then(({ data }) => {
          // console.log(data)
          commit('SET_USERS', data)
        })
        .catch(err => {
          console.log(err)
        })
    },
    addItem({ dispatch }, payload) {
      let formData = new FormData()
      formData.append('name', payload.name)
      formData.append('file', payload.file)
      formData.append('category', payload.category)
      formData.append('price', payload.price)
      formData.append('stock', payload.stock)
      formData.append('description', payload.description)
      axios({
        method: 'post',
        url: 'http://localhost:3000/products',
        data: formData,
        headers: {
          token: localStorage.getItem('token')
        }
      })
        .then(({ data }) => {
          // console.log('data hasbeen created ', data)
          dispatch('getAllItem')
        })
        .catch(err => {
          console.log(err)
        })
    },
    getAllItem({ commit }) {
      axios({
        method: 'get',
        url: 'http://localhost:3000/products'
      })
        .then(({ data }) => {
          // console.log(data)
          commit('SET_ALLITEM', data)
        })
        .catch(err => {
          console.log(err)
        })
    },
    addUserCart({ dispatch }, { payload, productId }) {
      let newCart = {
        count: payload
      }
      // console.log('ini dari store nya', productId)

      axios({
        method: 'post',
        url: `http://localhost:3000/transactions/${productId}`,
        data: newCart,
        headers: {
          token: localStorage.getItem('token')
        }
      })
        .then(({ data }) => {
          dispatch('getUserCart')
          // console.log('cart hasbeen added ', data)
        })
        .catch(err => {
          console.log(err)
        })
    },
    getUserCart({ commit }) {
      axios({
        method: 'get',
        url: 'http://localhost:3000/transactions/user',
        headers: {
          token: localStorage.getItem('token')
        }
      })
        .then(({ data }) => {
          // console.log(data)
          commit('SET_USERCART', data)
        })
        .catch(err => {
          console.log(err)
        })
    },
    cartCheckout({ commit, dispatch }, transactionId) {
      let count = null
      axios({
        method: 'post',
        url: `http://localhost:3000/transactions/checkout/${transactionId}`,
        headers: {
          token: localStorage.getItem('token')
        },
        data: {
          sesuatu: 'sesuatu'
        }
      })
        .then(({ data }) => {
          count = data.count
          console.log(count, data)

          dispatch('getUserCart')
        })
        .catch(err => {
          console.log(err)
        })
    },
    deleteTransactions({ dispatch }, transactionId) {
      axios({
        method: 'delete',
        url: `http://localhost:3000/transactions/${transactionId}`,
        headers: {
          token: localStorage.getItem('token')
        }
      })
        .then(({ data }) => {
          console.log('success delete')

          dispatch('getUserCart')
        })
        .catch(err => {
          console.log(err)
        })
    }
  },
  modules: {}
})


1
সাইটে স্বাগতম। কেবল একটি কোড স্নিপেট রাখা যথেষ্ট নয়। আপনার কোড সম্পর্কে কিছু ব্যাখ্যা প্রদান করুন।
pgk

0

আমি এইভাবে ব্যবহার করেছি এবং এটি কাজ করে:

store.js:

const state = {
  createSuccess: false
};

mutations.js

[mutations.CREATE_SUCCESS](state, payload) {
    state.createSuccess = payload;
}

actions.js

async [mutations.STORE]({ commit }, payload) {
  try {
    let result = await axios.post('/api/admin/users', payload);
    commit(mutations.CREATE_SUCCESS, user);
  } catch (err) {
    console.log(err);
  }
}

getters.js

isSuccess: state => {
    return state.createSuccess
}

এবং আপনার উপাদানটিতে যেখানে আপনি স্টোর থেকে রাজ্যটি ব্যবহার করেন:

watch: {
    isSuccess(value) {
      if (value) {
        this.$notify({
          title: "Success",
          message: "Create user success",
          type: "success"
        });
      }
    }
  }

যখন ব্যবহারকারী ফর্ম জমা দেবেন, তৈরি করা সাফল্যের পরে , ক্রিয়াকলাপ স্টোর কল হবে, তার পরে CREATE_SUCCESS রূপান্তর প্রতিশ্রুতিবদ্ধ। ক্রিয়েসুসেসস চালু করুন সত্য, এবং উপাদান হিসাবে, পর্যবেক্ষক মান পরিবর্তন হয়েছে এবং বিজ্ঞপ্তি ট্রিগার দেখতে পাবেন।

isSuccess আপনি getters.js এ যে নামটি ঘোষণা করেছেন তার সাথে মিল থাকা উচিত

আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.