时间戳

首页 > 解决方案 > 如何在 vuex 发布请求中从状态传递值

vue.js - 如何在 vuex 发布请求中从状态传递值

问题描述

我正在使用 get 和 set 为我的表单收集数据。我想将状态发布到 api。我怎样才能移动状态或以某种方式对它们进行分组，以便我可以将它们传递给行动？

  state: {
    firstname: "",
    lastname: "",

  },
  mutations: {
    setFirstName(state, value) {
      state.firstname = value
    },
    setLastName(state, value) {
      state.lastname = value
    },

所以它看起来像这样：

sendInfo({commit}, object) {
axios.post('API_URL', object)
.then((response) => {
 ...
})

}

computed: {
            firstname: {
                get() {
                    return this.$store.state.firstname
                },
                set(value) {
                    this.$store.commit("setFirstName", value)
                }
            },

还是我错误地接近这个？

标签： vue.jsvuex

解决方案

最好将这些值放在一个状态对象中，例如：

state: {
  user: {
    firstname: '',
    lastname: ''
  }
}

您可以在动作中设置对象

actions: {
  setData({ commit }, payload) {
    commit('SET_DATA', payload);
  }
},
mutations: {
  SET_DATA(state, payload) {
    state.user = payload;
  }
}

它在使用时也很简洁mapState：

computed: {
   ...mapState(['user'])
}

推荐阅读