Question

在下面的代码中，我将textarea的输出绑定到p元素，一次从组件的内部状态和一次从Vuex绑定。 Vuex状态确实显示初始值，但是当我添加或删除文本时，该值不会更新（因为它与绑定到内部数据的第一个文本区域正确）。造成这个问题的区别是什么？

组件代码：

<template>
  <div>
    <div>
      <textarea name="textarea1" id="txtid" cols="40" rows="30" v-model="internal_state"></textarea>
      <p> {{ internal_state }}</p>
      <hr>

      <textarea name="textarea1" id="txtid" cols="40" rows="30" v-model="this.$store.state.vuex_state"></textarea>
      <p> {{ this.$store.state.vuex_state }}</p>
      <hr>

    </div>
  </div>
</template>

<script>

  export default {
    name: 'WriteArea',
    data () {
      return {
        internal_state: ''
      }
    },
    methods: {


    }
  }

</script>

Vuex代码：

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export const store = new Vuex.Store({
  strict: true,
  state: {
    counter: 0,
    vuex_state: 'starting string'
  },
  getters: {
    vuex_getter1: (state) => {
      return state.vuex_string
    }
  }
})

Answer 1

应通过突变更新Vuex状态。有关此确切问题，请参阅文档。解决方案不是使用v-model，而是绑定到:value的{{1}}，然后有一个自定义事件来改变输入上的Vuex状态： https://vuex.vuejs.org/en/forms.html

textarea

另一种选择是在同一个计算属性中创建一个setter和getter：

<input :value="message" @input="updateMessage">
// ...
computed: {
  ...mapState({
    message: state => state.obj.message
  })
},
methods: {
  updateMessage (e) {
    this.$store.commit('updateMessage', e.target.value)
  }
}

Answer 2

您可以尝试使用我的库来进行2路绑定vuex问题解决方案

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

示例：

<template>
  <input v-model="name"/>
  <input v-model="email"/>
  <button @click.stop="step++">next</button>
</template>

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

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

存储/ index.js

export default new Vuex.Store({
  state: {
    wizard: {
      step: 1
    },
    user: {
      name: 'John',
      email: 'john@doe.com'
    }
  },
  mutations: {
    setWizardStep(state, step) {
      state.wizard.step = step;
    },
    editUser(state, patch) {
      state.user = Object.assign({}, state.user, patch);
    }
  }
});

与Vuex的2路数据绑定

2 个答案: