Блог

Главная - Вопросы по программированию - Как передавать значения из состояния в post-запросе vuex

Как передавать значения из состояния в post-запросе vuex

#vue.js #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)
                }
            },

или я неправильно подхожу к этому вопросу?

Ответ №1:

Вероятно, лучше всего поместить эти значения внутри объекта состояния, например:

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

Вы можете установить объект в действие

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

Это также делает его кратким при использовании mapState :

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

Комментарии:

1. Нужно ли мне действие для установки данных? Я использовал get set, чтобы задать состояние для моей многоступенчатой формы. Я отредактирую свой пост и покажу код для этого.

2. Нет, фиксация тоже в порядке. Вы бы просто удалили действие из моего ответа и использовали мутацию. Остальное останется прежним. Но ваше редактирование показывает, как вы это сделаете, если хотите изменить отдельные свойства. Мой ответ был на ваш вопрос об изменении их как группы.

3. Но get / set не только один, у меня их около 5 в разных представлениях.

4. Итак, когда я группирую их в состояние как полезную нагрузку: { }, в мутации, которую я меняю state.firstname = value на state.payload.firstname = value ?

5. Это становится сложнее при попытке использовать отдельные значения реактивно в форме, подобной вашей edit, потому что вам нужен отдельный вычисляемый сеттер для каждого из них. Или обходной путь, такой как клонирование объекта