Блог

У меня есть адресный компонент, который имеет базовую форму адреса с такими данными, как имя, улица, город, штат, страна. Я использую его для источника и назначения.

Образец шаблона

 <div class="row">
    <div class="col-6" id="src">
        <Address :address="src" />
    </div>
    <div class="col-6" id="dest">
        <Address :address="dest" />
    </div>
</div>
  

Я использую действие Vuex (с модулем) для получения данных из API (который может возвращать или не возвращать какие-либо адресные данные) и изменения состояния моего хранилища.

Пример состояния:

 Address:{
    src:{
       name:'',
       street:'',
       city:'',
       state:'',
       country:'',   
    },
    dest:{
       name:'',
       street:'',
       city:'',
       state:'',
       country:'',   
    }
}
  

Я хочу добиться двусторонней привязки данных между моими компонентами состояния и адреса посредством мутации.

Компонент адреса для src должен изменять Address.src.(название, улица, город, штат, страна) в состоянии, а компонент адреса для dest должен изменять Address.dest.(название, улица, город, штат, страна) в состоянии

Я попытался использовать props и emit, vuex-map-fields, следуя этому сообщению, и это не сработало.

Я не знаю, как правильно это реализовать.

Я публикую этот вопрос как новичок, чтобы получить помощь в том, как правильно это сделать?

Если я правильно понял вашу проблему, я следую приведенному ниже шаблону:

 Make API Call --> data is updated in Vuex --> picked up by computed prop in component
  

В принципе, в моем компоненте я могу создать вычисляемый prop, который извлекает данные из хранилища Vuex, примерно так:

 computed:{
  sourceAddress(){
    return this.$store.state.Address.src;
  },
  destinationAddress(){
    return this.$store.state.Address.dest;
  }
}

  

Затем я могу связать эти вычисленные реквизиты с моим адресным компонентом следующим образом:

 <div class="row">
    <div class="col-6" id="src">
        <Address :address="sourceAddress" />
    </div>
    <div class="col-6" id="dest">
        <Address :address="destinationAddress" />
    </div>
</div>

  

Теперь всякий раз, когда объект Address будет обновляться в Vuex (через вызов API), эти вычисляемые реквизиты будут выбирать изменение и обновлять компонент Address соответственно.

 // sample pseudo code

mutations:{

  updateAddress(state, {type,payload}){
    if(type==="destination"){ 
       // update destination address
      }
    else { 
       //update source address
     }
    
  }

},

actions:{

  makeApiCall(context){
    // lets say call succeeds and you have some data to update for destination address
   context.commit('updateAddress',{type:"destination", payload:"data-you-want-to-update});
  }

}

  

Вы можете использовать vuex getters для получения данных вашего хранилища. Vue обрабатывает более элегантный способ извлечения данных ( two way binding ) в компоненты с помощью функций помощников vuex. Вы можете прочитать больше о вспомогательных функциях vuex здесь

 // store.js
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

const store = {
   Address: {
    src: {
       name:'',
       street:'',
       city:'',
       state:'',
       country:'',   
    },
    dest: {
       name:'',
       street:'',
       city:'',
       state:'',
       country:'',   
    }
  }
}

const getters = {
   src: state => state.Address.src,
   desc: state => state.Address.desc
}

const mutations = {
  setSrc(state, srcObj) { // You can play around this to optimize if you can
    state.Address.src = srcObj
  },
  setDesc(state, descObj) {
    state.Address.desc = descObj
  }
}
const actions = {
   makeApiCall({ commit }, { type, params }) {
     yourApiCall(params).then((res) => {
       if (type === 'src') {  // You can play around this to optimize if you can
          commit('setSrc', res)
       } else {
          commit('setDesc', res)
       }
     })
   }
}

export default new Vuex.Store({ state, getters, mutations, actions})
  

 //main.js
// all other imports

import store from './store'

new Vue({
  el: '#app',
  store
})

  

 In your component

<Address :address="src"/>
<Address :address="desc"/>

import { mapGetters, mapActions } from 'vuex'

computed: {
  ...mapGetters(['src', 'desc']) // these are updated automatically when store changes and available on this.src/this.desc 
},
methods: {
  ...mapActions(['makeApiCall']) // you can directly call using this // this.makeApiCall({ type: 'src', params: {} }) 
}