Question

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

我想将数据从vue组件发送到vuejs存储，然后在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.

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

这就是为什么您应该具有这样的结构：

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文档中找到：InternalsVisibleToAttribute

如何将数据从Vuejs传递到vuex Store？

2 个答案: