Vue.js 2：无法使用与vuex结合的双向计算属性

Question

我无法将双向计算属性与vuex结合使用。

如果有输入更改，我想将getIsUnsavedData设置为true，并且＆＃34;复制＆＃34; /将更改提交到新变量$store.state.authenticatedUser.changedData。在有任何更改后，我希望从get()而不是$store.state.authenticatedUser.changedData输入$store.state.authenticatedUser.data的值以显示更改。

在拳头上，一切都像预期一样有效。如果有输入更改，则更改的值将复制到$store.state.authenticatedUser.changedData属性中。 getIsUnsavedData值更改为true，get（）指向复制的数据。 只剩下一个bug。突然，虽然vuex存储正在正确更新，但计算属性永远不会更改。 set()函数仍会被调用，但get()不会被调用。

<ui-textbox @change="valueChanged" v-model="userName"></ui-textbox>
// ...
  computed: {
    userName: {
      get() {
        return this.$store.getters.getIsUnsavedData ? this.$store.state.authenticatedUser.changedData.name : this.$store.state.authenticatedUser.data.name
      },
      set(value) {
        this.$store.commit('setChangedUserData', {
          key: 'name',
          value: value
        })
      }
    }
  },
  methods: {
    valueChanged() {
      this.$store.commit('setUnsavedState', true)
    }
  },
// ....

Answer 1

v-model应指向数据，而不是计算属性。计算属性产生数据，就像吸气剂本身一样。设置计算属性没有多大意义;它找到了自己的价值。我不确定这种实现如何与Vue自身的反应性和依赖性跟踪相互作用，但我怀疑它是问题的根源。

考虑：

// ... data () { userName: null, }, computed: { ...mapGetters([ 'userData', ]), }, methods: { }, watch: { userName () { this.$store.commit('setChangedUserData', { key: 'name', value: this.userName }) }, } // ...

apoc.algo.pageRank()
apoc.algo.pageRankWithConfig()

我可能会遗漏一些关于你正在做什么的事情，但这就是我开始解决这个问题的方法。

Answer 2

尝试使用我的库

https://github.com/yarsky-tgz/vuex-dot

它已经完成了这种情况，使代码中的setter / getter的代码足迹更少。

<template>
  <form>
    <input v-model="name"/>
    <input v-model="email"/>
  </form>
</template>

<script>
  import { takeState } from 'vuex-dot';

  export default {
    computed: {
      ...takeState('user')
        .expose(['name', 'email'])
        .dispatch('editUser')
        .map()
    }
  }
</script>