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

我认为您的格式有点不对。尝试像这样 build 商店。请记住，使用箭头函数与非箭头函数也会对引用的内容产生副作用。

大部分可以看到的是，我删除了 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>