Как передать данные из Vuejs в vuex Store?

Question

У меня есть компонент vuejs и магазин vuex.

Я хотел бы отправить данные из компонента vue в хранилище vuejs, а затем вызвать функцию в vuex, которая передает данные в БД.

Я получаю данные из currentUser (который работает), ноВ хранилище Vuex я получаю сообщение об ошибке: Cannot read property 'push' of null.

Я запускаю createPost, который работает, но данные не отправляются в хранилище Vuex, я думаю, потому что ошибка выше.

#vuejs component
import { mapState, mapGetters, mapMutations, mapActions } from "vuex";
import {
  SET_NEWPOST,
  ADD_TAGS,
  SET_USERDATA,
  SET_GENERAL
} from "@/store/posts/mutations";

methods: {
  ...mapMutations("posts", {
    updateInformation: SET_NEWPOST,
    setUserData: SET_USERDATA,
    addGeneral: SET_GENERAL,
    addTags: ADD_TAGS
  }),

  ...mapActions("posts", {
    create: "triggerAddProductAction"
  }),

  async createPost() {
      this.updateInformation({
        content: this.content,
        url: this.newOne
      });
      this.updateUserData();

      this.createOne();

  }
}

vuex store

...
const state = {
  products: []
}    

const mutations = {
   [addProduct]: (state, product) => state.products.push(product)
},

const actions: {
  createUserProduct: async ({ commit, rootState }, product) => {
    const userProductDb = new UserProductsDB(
        rootState.authentication.user.id
    );

    const createdProduct = await userProductDb.create(product);
    commit("addProduct", createdProduct);
 },
 triggerAddProductAction: ({ dispatch, state, commit }) => {
    const post = state.newPost;
    dispatch("createUserProduct", post);
 }
}

Answer 1

Я думаю, что одна из главных проблем здесь заключается в том, что вы вызываете мутации непосредственно в вашем компоненте.Мутации должны всегда вызываться действиями, а не напрямую.Это потому, что мутации синхронны, а действия могут быть асинхронными.От Vuex docs:

На действиях Асинхронность в сочетании с мутацией состояний может сделать вашу программу очень трудной для рассуждения.Например, когда вы вызываете два метода, оба с асинхронными обратными вызовами, которые изменяют состояние, как вы узнаете, когда они были вызваны и какой обратный вызов был вызван первым?Именно поэтому мы хотим разделить две концепции.В Vuex мутации - это синхронные транзакции:

store.commit('increment')
// any state change that the "increment" mutation may cause
// should be done at this moment.

Для обработки асинхронных операций давайте введем Actions.

Вот почему у вас должна быть такая структура:

export const mutations = {
  ADD_EVENT(state, event) {
    state.events.push(event)
  },
  SET_EVENTS(state, events) {
    state.events = events
  },
  SET_EVENTS_TOTAL(state, eventsTotal) {
    state.eventsTotal = eventsTotal
  },
  SET_EVENT(state, event) {
    state.event = event
  }
}
export const actions = {
  createEvent({ commit, dispatch }, event) {
    return EventService.postEvent(event)
      .then(() => {
        commit('ADD_EVENT', event)
        commit('SET_EVENT', event)
        const notification = {
          type: 'success',
          message: 'Your event has been created!'
        }
        dispatch('notification/add', notification, { root: true })
      })
      .catch(error => {
        const notification = {
          type: 'error',
          message: 'There was a problem creating your event: ' + error.message
        }
        dispatch('notification/add', notification, { root: true })
        throw error
      })
  }

Посмотрите также это видео от vuemastery, которое даже есть в официальных документах vuex: https://www.vuemastery.com/courses/mastering-vuex/intro-to-vuex/

Answer 2

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

В основном можно видеть, что я удалил const и поместил все это непосредственно в литерал объекта. Я также удаляю Destructuring из addProduct, поскольку здесь это не выглядит логичным.

const store = new Vuex.Store({
  state: {
    products: []
  },
  mutations: {
    addProduct: (state, product) => {
      state.products.push(product)
      console.log('Added Product:', product)
      console.log('products', state.products)
    }
  },
  actions: {
    async createUserProduct({ commit }, product) {
      commit("addProduct", product);
    }
  }
});

new Vue({
  el: "#app",
  store,
  mounted() {
    this.$store.dispatch('createUserProduct', 1)
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vuex/3.1.0/vuex.min.js"></script>
<div id="app"></div>