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

我有一个地址组件，它有基本的地址表单，详细信息包括姓名、街道、城市、州、国家等。 我将其用于源和目标

样本模板

<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.（姓名、街道、城市、州、国家），而dest的地址组件应在州内变异Address.dest.（姓名、街道、城市、州、国家）

我尝试使用道具和发射，通过遵循这一点，但它没有工作

我不知道什么是正确的实施方法

我把这个问题作为一个noob来发布，以获得帮助

---

正确的方法是什么？

如果我正确理解了您的问题，我将遵循以下模式：

makeAPI调用-->数据在Vuex-->中更新，由组件中的计算属性拾取

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

计算：{
sourceAddress（）{
返回此。$store.state.Address.src；
},
目的地址（）{
返回此项。$store.state.Address.dest；
}
}

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

现在，无论何时（通过API调用）在Vuex中更新Address对象，这些计算道具都将分别选择更改和更新Address组件

//示例伪代码
突变：{
updateAddress（状态，{type，payload}）{
如果（类型==“目的地”）{
//更新目标地址
}
否则{
//更新源地址
}
}
},
行动：{
makeApiCall（上下文）{
//假设调用成功，并且您有一些数据要为目标地址更新
commit（'updateAddress'，{type:“destination”，payload:“您要更新的数据}）；
}
}

您可以使用

vuex getters

获取存储数据。Vue使用vuex helpers函数将数据（

双向绑定

）拉入组件的方式更加优雅。您可以阅读有关vuex helper函数的更多信息

组件中的

从“vuex”导入{MapGetter，mapActions}
计算：{
…mapGetters（['src'，'desc']）//当存储更改时，这些将自动更新，并在this.src/this.desc上可用
},
方法：{
…mapaActions（['makeApiCall']）//您可以使用this//this.makeApiCall（{type:'src'，params:{}}）直接调用
}

这解决了从vuex到地址组件的数据问题，我如何将地址组件中的更改更新为vuex状态？我想实现双向数据绑定@Nishkaush首先定义一个

变异

，它在接收数据时将更新状态。然后在

vuex操作中调用此变异

（API调用成功并实际包含一些要更新的数据后）@AkashPreet，如果您对该解决方案感到满意，您是否可以将其标记为未来读者可以遵循的答案。感谢@Naren的答案，但它仍然无法解决问题。如果我们更改地址组件输入字段中的值，我想改变状态。例如：如果API将Address.src.name返回为Naren（将以状态存储）然后页面将在地址的名称输入字段中加载Naren。若我将Naren更改为Akash，那个么它应该在状态中发生变化（Address.src.name现在应该是Akash）。您不应直接更改状态，应仅对突变进行更改。根据Vuex文档：

在Vuex存储中实际更改状态的唯一方法是提交突变

，阅读了解更多信息如果您想从输入字段更改状态，请在存储中添加突变，并使用该突变更新状态。

const突变={changeName（state，name）{state.Address.name=name}}

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

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