मैं vuex का उपयोग कर रहा हूं और मेरे पास एक action है

storeExpense(context, params){
    axios.post('api/expenses', params)
    .then( response => {
        console.log("Expense Created");
    })
    .catch( error => {
        console.log(error);
    });
}

और मेरे Expense.vue के माध्यम से कार्रवाई का उपयोग कर रहा हूँ

this.$store.dispatch('storeExpense',this.expense)
.then( response => {
   this.modalShow = false
   this.$swal(
   'Success',
   'Expense has been created!',
   'success'
   )
})

मुझे कोई त्रुटि नहीं है लेकिन व्यय के बाद राज्य अद्यतन नहीं हो रहा है इसलिए मुझे नवीनतम डेटा प्राप्त करने के लिए मेरी तालिका के लिए पृष्ठ को रीफ्रेश करने की आवश्यकता है।

मेरे पास एक उत्परिवर्तन है जिसे कहा जाता है

mutateExpenses(state, payload){
 state.expenses = payload
}

हालांकि जब मैं प्रतिक्रिया के बाद इसका उपयोग करता हूं तो यह पूरे राज्य को ओवरराइड करता है। ऑब्जेक्ट को एक ऑब्जेक्ट पर खर्च करता है क्योंकि यह। व्यय एक ही वस्तु है

मैं vuex के लिए नया हूँ।

0
Beginner 15 मई 2019, 12:10

1 उत्तर

सबसे बढ़िया उत्तर

आपको अपने कार्यों के अंदर बुलाए गए म्यूटेशन का उपयोग करके अपने स्टोर को अपडेट करना होगा। मेरा सुझाव है कि आप Vuex के दस्तावेज़ों में थोड़ा गोता लगाएँ, खासकर म्यूटेशन और कार्रवाइयाँ : )

स्टोर का उपयोग कैसे करें इसका एक उदाहरण यहां दिया गया है:

यह होता है प्रेषण --> कार्रवाई --> म्यूटेशन

// Your store
const store = new Vuex.Store({
  state: {
    posts: [],
    isLoading: false
  },

  mutations: {
    // Must be called by actions AND ONLY by actions
    add(state, post) {
      // Add the given post to the 'posts' array in our state
      Vue.set(state.posts, state.posts.length, post)
    },
    busy(state) {
      Vue.set(state, 'isLoading', true)
    },
    free(state) {
      Vue.set(state, 'isLoading', false)
    }
  },
  actions: {
    create({
      commit
    }, post) {
      commit('busy')
      axios.post('https://jsonplaceholder.typicode.com/posts', post)
        .then(response => {
          // Call the mutation method 'add' to add the newly created post
          commit('add', response.data)
        })
        .catch((reason) => {
          // Handle errors
        })
        .finally(() => {
          commit('free')
        });
    },
  }
})

// Your Vue app
new Vue({
  el: "#app",
  store,
  data: {
    post: {
      title: 'foo',
      body: 'bar',
      userId: 1
    }
  },
  methods: {
    onButtonClicked() {
      this.$store.dispatch('create', this.post)
    }
  }
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.18.0/axios.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vuex/3.1.0/vuex.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.min.js"></script>
<div id="app">
  <button @click="onButtonClicked">Create Post</button>
  <div>Posts : <span v-if="$store.state.isLoading">Requesting</span></div>
  <div v-for="post in $store.state.posts">
    {{post}}
  </div>
</div>
1
Cédric M. 15 मई 2019, 12:33