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

Question

Я использую 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
}

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

Я новичок в vuex.

Answer 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>