Обновить состояние после использования отправки

Я использую vuex, и у меня есть action

storeExpense(context, params){
    axios.post('api/expenses', params)
    .then( response => {
        console.info("Expense Created");
    })
    .catch( error => {
        console.info(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
}

однако, когда я использую это после ответа, он переопределяет весь объект state.expenses на один объект, потому что this.expense - это один объект

Я новичок в vuex.

Ваше действие должно заключаться в совершении мутаций, чтобы обновить ваш магазин с помощью ответа API. Вы должны сделать это там, где вы зарегистрировали «Расход создан».

— 15.05.2019 11:39

отредактировал господа....

— 15.05.2019 11:49

Ваше действие не возвращает обещание (и не должно), я не понимаю then после dispatch. Вы также должны называть свою мутацию вместо вашего console.info("Expense Created");.

— 15.05.2019 14:30

javascript vue.js vuejs2 vuex

15.05.2019 11:10

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

640

Перейти к ответу Данный вопрос помечен как решенный

Ответы 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>

Благодарю. сначала я использовал функцию push для добавления данных в массив. не знал, что не получится. Vue.set - это то, что я ищу, спасибо

— 16.05.2019 04:38

15.05.2019 14:08