如何將數據從Vuejs傳遞到vuex商店？

Question

我有一個vuejs組件和一個vuex商店。

我想將數據從vue組件發送到vuejs store，然后在vuex中調用一個將數據推送到db的函數。

我從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商店

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

我認為你的格式有點偏差。 嘗試像這樣建立商店。 請記住，使用箭頭函數與非箭頭函數也會對引用的內容產生副作用。

最重要的是，我刪除了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> 

Answer 2

我認為這里的一個主要問題實際上是您直接在組件中調用突變。 變異應始終由行動而不是直接調用。 這是因為突變是同步的，動作可以是異步的。 來自Vuex文檔：

關於動作異步性結合狀態變異可能使你的程序很難推理。 例如，當您使用異步回調調用兩個方法來改變狀態時，您如何知道何時調用它們以及首先調用哪個回調？ 這正是我們想要將這兩個概念分開的原因。 在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
      })
  }

也可以通過官方vuex文檔上的vuemastery查看此視頻： https ：//www.vuemastery.com/courses/mastering-vuex/intro-to-vuex/