vue.js 2 วิธีดูค่าร้านค้าจาก vuex


169

ฉันใช้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 ของฉันได้อย่างไร


ใช้ปลั๊กอิน Vuejs ซึ่งมาพร้อมกับโครเมี่ยมมันจะมีประโยชน์
AKASH PANDEY

คำตอบ:


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

คุณสามารถอ่านเพิ่มเติมได้จากแหล่งข้อมูลต่อไปนี้:


ฉันแค่สงสัยว่าสิ่งที่ shoul ฉันจะทำเมื่อการwatchกระทำควรแบ่งออกเป็นสองขั้นตอน: 1) ก่อนอื่นตรวจสอบว่าข้อมูลความปรารถนาจะถูกเก็บไว้ในแคชและถ้ามันจะกลับข้อมูลแคช; 2) หากแคชล้มเหลวฉันจำเป็นต้องมีการกระทำ ajax async เพื่อดึงข้อมูล แต่ดูเหมือนว่าจะเป็นactionงานของ หวังว่าคำถามของฉันจะสมเหตุสมผลขอขอบคุณ!
1Cr18Ni9

ประโยชน์ของสิ่งนี้คืออะไรมากกว่าคำตอบของ micah5 ซึ่งเพิ่งตั้งตัวเฝ้าดูในส่วนประกอบตามมูลค่าที่จัดเก็บ? มันมีรหัสน้อยในการรักษา
Exocentric

@Excentric เมื่อฉันเขียนคำตอบคำถามไม่ชัดเจนสำหรับฉัน ไม่มีบริบทว่าทำไมจึงจำเป็นต้องดูคุณสมบัติ ลองคิดดูว่า: "ฉันต้องการดูตัวแปร X ดังนั้นฉันจึงสามารถทำ Y" อาจเป็นเหตุผลที่คำตอบส่วนใหญ่เสนอวิธีการที่แตกต่างกันอย่างมากมาย ไม่มีใครรู้ว่าเจตนาคืออะไร นั่นคือเหตุผลที่ฉันรวม "วัตถุประสงค์" ไว้ในคำตอบของฉัน หากคุณมีวัตถุประสงค์ที่ต่างกันคำตอบที่ต่างกันอาจเหมาะกับพวกเขา ตัวอย่างของฉันเป็นเพียงจุดเริ่มต้นสำหรับการทดลอง มันไม่ได้มีไว้เพื่อเป็นโซลูชันแบบพลักแอนด์เพลย์ ไม่มี "ผลประโยชน์" เนื่องจากผลประโยชน์ขึ้นอยู่กับสถานการณ์ของคุณ
Anastazy

@ 1Cr18Ni9 ฉันคิดว่าแคชไม่ได้อยู่ในรหัสส่วนประกอบ คุณจะต้องทำอะไรบางอย่างที่เกินความจำเป็นจริงๆ (ดึงข้อมูลและผูกเข้ากับมุมมอง) มีการใช้งานแคชในเบราว์เซอร์แล้ว คุณสามารถใช้ประโยชน์จากมันโดยการส่งส่วนหัวที่ถูกต้องจากเซิร์ฟเวอร์ คำอธิบายง่ายๆที่นี่: csswizardry.com/2019/03/cache-control-for-civilians นอกจากนี้คุณยังสามารถดู ServiceWorkers ที่อนุญาตให้เว็บไซต์ทำงานได้โดยไม่ต้องเชื่อมต่ออินเทอร์เน็ต
Anastazy

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
ฉันไม่ทราบวิธีการนำ MapGetters ไปใช้ คุณสามารถชี้ให้ฉันตัวอย่าง มันจะช่วยได้มาก ฉันเพิ่งใช้คำตอบฆ้องในขณะนี้ TY
Rbex

1
@Rbex "mapGetters" เป็นส่วนหนึ่งของไลบรารี 'vuex' คุณไม่จำเป็นที่จะใช้มัน
Gabriel Robert

69
คำตอบนี้เป็นความผิดเพียง อันที่จริงเขาต้องการที่จะดูคุณสมบัติคำนวณ

15
ทะเยอทะยานครั้งเดียวจะเรียกสถานะในเวลานั้นเท่านั้น หากคุณต้องการให้คุณสมบัติดังกล่าวสะท้อนการเปลี่ยนแปลงสถานะจากส่วนประกอบอื่นคุณต้องดู
C Tierney

3
ทำไม "คุณไม่ควรใช้ตัวเฝ้าของส่วนประกอบเพื่อรับฟังการเปลี่ยนแปลงสถานะ" นี่คือตัวอย่างที่คุณอาจไม่คิดว่าถ้าฉันต้องการดูโทเค็นจากสถานะและเมื่อมันเปลี่ยนเป็นเปลี่ยนเส้นทางไปยังหน้าอื่น ดังนั้นมีบางกรณีที่คุณต้องทำเช่นนั้น บางทีคุณอาจต้องการประสบการณ์เพิ่มเติมเพื่อทราบ
Shlomi Levi

48

มันง่ายเหมือน:

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

6
นี่เป็นสิ่งที่น่ารังเกียจยิ่งกว่าคำตอบใด ๆ ที่นี่ ... มีข้อโต้แย้งใด ๆ ในการทำสิ่งนี้หรือไม่?
Inigo

19
มันง่ายเกินไปดังนั้นดูไม่เหมือน js, js ต้องมีความซับซ้อนมากขึ้น
digout

1
จะง่ายกว่านี้อีกถ้ามันเป็นfunction(n) { console.log(n); }
WofWca

2
เด็ดสุด ๆ สนใจในข้อเสียของวิธีนี้ จนถึงขณะนี้ก็ดูเหมือนว่าจะทำงานได้ดี
namero999

1
อย่างจริงจัง. ดูเหมือนจะดีกว่าคำตอบที่ยอมรับซึ่งต้องใช้ชื่อฟังก์ชันซ้ำในการดูและคำนวณ สามารถแสดงความคิดเห็นจากผู้เชี่ยวชาญเกี่ยวกับว่าทำไมหรือทำไมไม่ทำอย่างนี้?
Exocentric

43

ดังที่กล่าวข้างต้นไม่ควรดูการเปลี่ยนแปลงในร้านโดยตรง

แต่ในบางกรณีที่หายากมากมันอาจจะมีประโยชน์สำหรับใครบางคนดังนั้นฉันจะทิ้งคำตอบนี้ไว้ สำหรับกรณีอื่น ๆ โปรดดูคำตอบ @ gabriel-robert

state.$watchคุณสามารถทำเช่นนี้ผ่าน เพิ่มสิ่งนี้ในวิธีcreated(หรือที่คุณต้องการให้ดำเนินการ) ในส่วนประกอบ

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
ฉันไม่คิดว่ามันเป็นความคิดที่ดีที่จะดูสถานะโดยตรง เราควรใช้ getters vuex.vuejs.org/en/getters.html#the-mapgetters-helper
Gabriel Robert

14
@ GabrielRobert ฉันคิดว่ามีทั้งคู่ หากคุณต้องการเปลี่ยนเงื่อนไขแม่แบบตามปฏิกิริยาโดยใช้ค่าที่คำนวณด้วย mapState ฯลฯ จะสมเหตุสมผล แต่อย่างอื่นเช่นสำหรับการควบคุมการไหลแบบสม่ำเสมอในส่วนประกอบคุณต้องมีนาฬิกาที่สมบูรณ์ คุณถูกต้องคุณไม่ควรใช้นักสังเกตการณ์แบบธรรมดา แต่รัฐ $ watch ถูกออกแบบมาสำหรับกรณีการใช้งานเหล่านี้
roberto tomás

14
ทุกคนพูดถึงมัน แต่ไม่มีใครบอกว่าทำไม! ฉันกำลังพยายามสร้างร้านค้า vuex ที่ซิงโครไนซ์อัตโนมัติกับฐานข้อมูลเมื่อมีการเปลี่ยนแปลง ฉันรู้สึกว่านักดูในร้านเป็นวิธีที่ไร้แรงเสียดทานมากที่สุด! คุณคิดอย่างไร? ยังไม่ใช่ความคิดที่ดีใช่ไหม
mesqueeb

16

ฉันคิดว่าผู้ถามต้องการใช้นาฬิกากับ Vuex

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

      },
      {
        deep:true
      }
      );

13

นี่คือสำหรับทุกคนที่ไม่สามารถแก้ปัญหาของพวกเขากับผู้ได้รับและต้องการผู้เฝ้าดูเช่นพูดคุยกับบุคคลที่สามที่ไม่ใช่ vue (ดูVue Watchersควรใช้ตัวเฝ้าดูเมื่อใด)

ผู้เฝ้าดูองค์ประกอบ Vue และค่าที่คำนวณได้ทั้งคู่ยังสามารถใช้งานกับค่าที่คำนวณได้ ดังนั้นจึงไม่ต่างกับ vuex:

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);
        }
    }
}

ถ้ามันเกี่ยวกับการรวมสถานะท้องถิ่นและส่วนกลางเอกสาร doc ของ mapStateจะแสดงตัวอย่าง:

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

แฮ็คที่ดี แต่น่าเบื่อเกินไปคุณไม่คิดเหรอ?
Martian2049

2
ไม่ใช่แฮ็คถ้าอยู่ในเอกสารใช่ไหม แต่แล้วก็ไม่ใช่ข้อโต้แย้งสำหรับ vue / vuex เช่นกัน
dube

8

ถ้าคุณใช้ typescript คุณสามารถ:

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

..

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


ทำไมสิ่งนี้จึงถูก downvote? เพียงเพราะโซลูชันสำหรับ vue-class-component และ TO กำลังขอสไตล์ vue-class เก่าหรือไม่ ฉันพบว่าอดีตที่ดีกว่า @Zhang Sol อาจกล่าวถึงในบทนำได้หรือไม่ว่านี่เป็นเนื้อหาสำหรับ vue-class-component
JackLeEmmerdeur

โปรดทราบว่าทำไมตัวตกแต่งตัวพิมพ์ดีดจึงเหมาะกับโซลูชัน vue แบบดั้งเดิมอย่างง่าย ๆ เช่นstackoverflow.com/a/56461539/3652783
yann_yinn

6

สร้างสถานะท้องถิ่นของตัวแปรร้านค้าของคุณโดยดูและตั้งค่าการเปลี่ยนแปลงค่า เช่นนั้นการเปลี่ยนแปลงตัวแปรท้องถิ่นสำหรับรูปแบบการป้อนข้อมูล v- รูปแบบไม่ได้กลายพันธุ์ตัวแปรร้านค้าโดยตรง

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.idtodoById


ขอบคุณ. นั่นเป็นกรณีการใช้งานของฉันอย่างแน่นอนและผู้เฝ้ามองไม่สามารถมองเห็นได้ในตอนนั้น ...
pscheit

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กับ vsoldValue
Januartha

@ Januartha ข้อเสนอแนะของคุณสำหรับปัญหานี้คืออะไร?
Billal Begueradj

@Andy ใช่แน่นอนมันทำงานได้ ผมแค่อยากจะทราบเหตุผลที่คุณโทรหาstore.dispatch? ถ้าคุณต้องการจัดการstore.stateการเปลี่ยนแปลงสำหรับstore' why not handle it inside store.mutations`
Januartha

@BillalBEGUERADJ ฉันชอบวิธีแก้ปัญหาdubeมากขึ้นที่จะสะอาด
Januartha

@Januartha เพราะอาจมีการโทรอาแจ็กซ์ที่จะเกิดขึ้นก่อนที่จะทำการกลายพันธุ์นั่นคือเหตุผลที่ฉันใช้store.dispatchครั้งแรก ตัวอย่างเช่นฉันต้องการรับเมืองทั้งหมดจากประเทศเมื่อใดก็ตามที่มี$store.state.countryการเปลี่ยนแปลงดังนั้นฉันจึงเพิ่มสิ่งนี้ไปยังผู้เฝ้าดู จากนั้นฉันจะเขียนโทรศัพท์ ajax: ในstore.dispatch('fetchCities')ฉันเขียน:axios.get('cities',{params:{country: state.country }}).then(response => store.commit('receiveCities',response) )
Andy

2

คุณสามารถใช้การรวมกันของการกระทำ Vuex , getters , คุณสมบัติที่คำนวณและเฝ้าดูเพื่อฟังการเปลี่ยนแปลงในค่าสถานะ Vuex

รหัส HTML:

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

รหัส JavaScript:

'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()}`)
    }
  }
})

สาธิตดู JSFiddle


1

คุณสามารถสมัครสมาชิกการกลายพันธุ์ของร้านค้าได้:

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

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


คุณสามารถเริ่มต้นสิ่งนี้ได้ในตะขอ beforeMount () ของส่วนประกอบของคุณจากนั้นกรองการกลายพันธุ์ที่เข้ามาด้วย if statement เช่นถ้า (mutation.type == "ชื่อ / SET_NAMES") {... do something}
Alejandro

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

คุณยังสามารถใช้ mapState ในองค์ประกอบ vue ของคุณเพื่อรับสถานะโดยตรงจากร้านค้า

ในองค์ประกอบของคุณ:

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จะถูกกำหนดหลังจากนั้น เทิร์นcreateSuccessนั้นเป็นจริงและในองค์ประกอบผู้เฝ้าดูจะเห็นคุณค่าที่เปลี่ยนไปและทำให้เกิดการแจ้งเตือน

isSuccessควรตรงกับชื่อที่คุณประกาศในgetters.js

โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.