使用v模型的Vuex输入不是被动的

Question

我试着尽可能简单地解释它。我有类似的东西。简单的Vue根，Vuex存储以及在navbar id中使用v-model输入。

那个输入不是被动的......为什么？！

HTML

<div id="navbar">
    <h2>@{{ test }}</h2>
    <input v-model="test" />
</div>

store.js

import Vuex from 'vuex'

export const store = new Vuex.Store({
  state: {
    test: 'test'
  },
  getters: {
    test (state) {
      return state.test
    }
  }
})

Vue Root

import { store } from './app-store.js'

new Vue({
  el: '#navbar',
  store,
  computed: {
    test () {
      return this.$store.getters.test
    }
  }
})

Answer 1

您绑定到计算属性。要在计算属性上设置值，您需要编写get和set方法。

computed:{
    test:{
        get(){ return this.$store.getters.test; },
        set( value ){ this.$store.commit("TEST_COMMIT", value );}
    }
}

并在您的商店

mutations:{
    TEST_COMMIT( state, payload ){
        state.test=payload;
    }
}

现在，当您更改绑定到test的输入值时，它将触发对商店的提交，该商店会更新其状态。

Answer 2

您不想使用v-model。相反，请在输入字段和@input="test"挂钩中使用methods：

 test(e){
    this.$store.dispatch('setTest', e.target.value)
 }

在Vuex商店内：

在mutations：

   setTest(state, payload){
      state.test = payload
   },

在actions：

setTest: (context,val) => {context.commit('setTest', val)},

输入现在应该是被动的，您应该在@{{test}}

中看到结果

以下是我如何使用Vuex处理用户输入的示例：http://codepen.io/anon/pen/gmROQq

Answer 3

你可以轻松地使用v-model，每次使用我的库时都会触发操作/突变：

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

<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'])
        .commit('editUser') // payload example: { name: 'Peter'}
        .map()
    }
  }
</script>

Answer 4

我认为“计算”属性是一种方法。如果您要双向绑定，请像其他答案一样使用setter或使用'data'属性。

import { store } from './app-store.js'

new Vue({
  el: '#navbar',
  store,
  // computed: {
  //  test () {
  //    return this.$store.getters.test
  //  }
  // }
  data: function () {
          return { test: this.$store.getters.test }
  }
})

但是使用setter更好地验证输入值。