如何将数据从 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 商店

...
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 文档：

开始行动 异步性与状态突变相结合会使您的程序非常难以推理。例如，当您使用改变状态的异步回调调用两个方法时，您如何知道它们何时被调用以及首先调用了哪个回调？这正是我们想要将这两个概念分开的原因。在 Vuex 中，mutations 是同步事务：

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，并将其全部直接放在对象字面量中。我还删除了addProduct 的Destructuring，因为这里看起来不合逻辑。

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>