zoukankan      html  css  js  c++  java
  • 【Vuex】双向绑定和 vuex 是否冲突

    当在严格模式中使用 Vuex 时,在属于 Vuex 的 state 上使用 v-model 会导致出错。

    <input v-model="obj.message">

    假设这里的 obj 是在计算属性中返回的一个属于 Vuex store 的对象,在用户输入时,v-model 会试图直接修改 obj.message。在严格模式中,由于这个修改不是在 mutation 函数中执行的, 这里会抛出一个错误。

    解决方法1:

    用“Vuex 的思维”去解决这个问题的方法是:给 <input> 中绑定 value,然后侦听 input 或者 change 事件,在事件回调中调用一个方法:

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

    下面是 mutation 函数:

    // ...
    mutations: {
      updateMessage (state, message) {
        state.obj.message = message
      }
    }

    解决方法2:双向绑定的计算属性

    必须承认,这样做比简单地使用“v-model + 局部状态”要啰嗦得多,并且也损失了一些 v-model 中很有用的特性。另一个方法是使用带有 setter 的双向绑定计算属性:

    <input v-model="message">
    // ...
    computed: {
      message: {
        get () {
          return this.$store.state.obj.message
        },
        set (value) {
          this.$store.commit('updateMessage', value)
        }
      }
    }
  • 相关阅读:
    资源列表
    资源列表
    编程语言资源列表
    PyTorch简介
    Keras构建回归神经网络
    Keras简介
    Tensorflow之RNN,LSTM
    Tensorflow之CNN
    Tensorflow之dropout
    Tensorflow做分类
  • 原文地址:https://www.cnblogs.com/vickylinj/p/14375600.html
Copyright © 2011-2022 走看看