Javascript 如何将数据从Vuejs传递到vuex存储？

我有一个vuejs组件和一个vuex存储

我想将数据从vue组件发送到vuejs存储，然后调用vuex中的一个函数，将数据推送到数据库

我从currentUser（可以工作）获取数据，但在vuex存储中我得到错误：

无法读取null的属性“push”

我运行了

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);
 }
}

---

我认为你的格式有点不对劲。试着像这样建造商店。请记住，使用箭头函数和非箭头函数在引用的内容中也可能产生副作用

大部分可以看到的是，我删除了

常量

，并将其直接放在对象文本中。我还删除了

addProduct

的

解构

，因为它在这里似乎不符合逻辑

const store=新的Vuex.store({
声明：{
产品：[]
},
突变：{
addProduct：（州、产品）=>{
状态.产品.推送（产品）
console.log（'添加的产品：'，产品）
console.log（'products'，state.products）
}
},
行动：{
异步createUserProduct（{commit}，product）{
提交（“添加产品”，产品）；
}
}
});
新Vue({
el:“应用程序”，
商店，
安装的（）{
此.$store.dispatch（'createUserProduct'，1）
}
})

---

我认为您的格式有点不合适。试着像这样建造商店。请记住，使用箭头函数和非箭头函数在引用的内容中也可能产生副作用

大部分可以看到的是，我删除了

常量

，并将其直接放在对象文本中。我还删除了

addProduct

的

解构

，因为它在这里似乎不符合逻辑

const store=新的Vuex.store({
声明：{
产品：[]
},
突变：{
addProduct：（州、产品）=>{
状态.产品.推送（产品）
console.log（'添加的产品：'，产品）
console.log（'products'，state.products）
}
},
行动：{
异步createUserProduct（{commit}，product）{
提交（“添加产品”，产品）；
}
}
});
新Vue({
el:“应用程序”，
商店，
安装的（）{
此.$store.dispatch（'createUserProduct'，1）
}
})

---

我认为这里的一个主要问题实际上是直接在组件中调用突变。突变应该总是通过行动而不是直接调用。这是因为突变是同步的，动作可以是异步的。从Vuex文档：

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

要处理异步操作，让我们介绍操作

这就是为什么你应该有这样一个结构：

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官方文档中：

我认为这里的主要问题之一实际上是您直接在组件中调用突变。突变应该总是通过行动而不是直接调用。这是因为突变是同步的，动作可以是异步的。从Vuex文档：

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

要处理异步操作，让我们介绍操作

这就是为什么你应该有这样一个结构：

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文档中提供的这段视频：

您将数据作为第二个参数传递给

dispatch

，例如，要传递

1的值，请使用：
this.$store.dispatch（'createUserProduct'，1）
是的，我理解，但是对我没有帮助，
const post=..
是空的，我不知道为什么我认为这是因为您格式化对象的方式不同，但每次相同的错误，您都将数据作为第二个参数传递给
dispatch
，例如传递值
1
使用：
this.$store.dispatch（'createUserProduct'，1）
是的，我理解，但对我没有帮助，
const post=..
是空的，我不知道为什么我认为这是因为你格式化对象的方式不同，我测试了不同的方式，但每次都出现相同的错误你确定它引用了这个
推送吗
？你在其他地方有推送吗？这是我在vuexI中唯一的推送方式更新了答案，代码就可以运行了，你可以看到你是否运行了。你一定在做其他事情，将
products
的值设置为
null
。是的，我也这么认为。你的例子很好地解释了这一点，我更改了代码，但又出现了同样的错误：
UserProductsDB
或
是否可能使用rProductDb.create（）
正在以某种方式操纵值？您确定它引用了此
推送吗？
？您在其他地方有推送吗？这是我在vuexI中仅有的一个推送吗？我已经更新了答案，并且代码可以工作，您可以看到，如果您运行它。您一定在执行其他操作，将
产品的值设置为
null
。我也这么认为。您的示例很好地解释了这一点，我更改了代码，但又出现了相同的错误：“
UserProductsDB
或
userProductDb.create（）
是否可能以某种方式操纵了值？”？