在Vuex中为同一组件实现双向数据绑定的不同方法

问题描述

我有一个地址组件，该组件具有基本的地址表单，其详细信息包括名称，街道，城市，州，国家/地区。 我正在将其用于来源和目的地。

示例模板

import discord

intents = discord.Intents().all()
client = discord.Bot(prefix = '',intents=intents)

我正在使用 Vuex操作（带有模块）从API获取数据（该API可能返回也可能不返回任何地址数据）并在商店的状态下发生变化。

样品状态：

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

我想通过突变实现状态和地址组件之间的双向数据绑定。

用于 src 的地址部分应将 Address.src。（名称，街道，城市，州，国家/地区）（状态和地址部分）中的目的地进行突变 strong>应该更改州内的 Address.dest。（名称，街道，城市，州，国家/地区）

我尝试使用道具并通过遵循此vuex-map-fields来发射post，但没有用。

我不知道实现它的正确方法是什么。

我将这个问题作为菜鸟发布，以寻求帮助 正确的方法是什么？

解决方法

如果我正确理解了您的问题，请按照以下模式进行操作：

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

基本上，我可以在组件中创建一个计算道具，该道具从Vuex存储中获取数据，如下所示：

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

然后我可以将这些计算的道具绑定到我的Address组件上，如下所示：

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

现在，只要在Vuex中（通过API调用）更新Address对象，这些计算的道具就会分别选择更改并更新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使用vuex帮助器函数以更优雅的方式将数据（two way binding）提取到组件中。您可以阅读有关vuex辅助功能here

的更多信息

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

Vue.use(Vuex)

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

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: {} }) 
}