zoukankan      html  css  js  c++  java
  • 将v-model的值绑定到vuex中时遇到的问题及解决办法(computed替代watch)

    store.js如下:

    import Vue from 'vue'
    import Vuex from 'vuex'
    
    Vue.use(Vuex)
    
    export default new Vuex.Store({
      state: {
        value: 100
      },
      mutations: {
        updateValue(state, value) {
          state.value = value
        }
      }
    })

    组件中使用vuex中的value:

        <el-input v-model="myValue"></el-input>
        <p>{{value}}</p>
    import { mapState, mapMutations } from 'vuex'
    export default {
      data() {
        return {
          myValue: 0
        }
      },
      computed: {
        ...mapState({
          value: (state) => state.value
        })
      },
      watch: {
        myValue(newVal) {
          this.updateValue(newVal)
        }
      },
      methods: {
        ...mapMutations({
          updateValue: 'updateValue'
        })
      },
      created() {
        const { value } = this
        this.myValue = value
      }
    }

    思路:将vuex中的value映射到组件的myValue中,页面渲染myValue。v-model修改myValue时通过watch监听去改变vuex中的value

    其实是可以有简便方法去双向绑定value的

    思路:通过使用computed的get和set方法去获取和改变vuex中的value

        <el-input v-model="value"></el-input>
        <p>{{value}}</p>
      computed: {
        value() {
          return this.$store.state.value
        }
      }

    页面效果:

    但是此时在输入框内输入或删除字符,就会报错:

    原因是通过v-model设置value的值,就是要触发computed,但此时value值只设置了get而没有设置set,解决:

      computed: {
        value: {
          get(){
            return this.$store.state.value
          },
          set(value) {
            this.$store.commit('updateValue', value)
          }
        }
      }

    这样,就可以实现将数据双向绑定到vuex中了。

  • 相关阅读:
    Rufus 真神器也
    i2c-tools命令使用 示例
    常用行棋手法
    Windows系统如何更改任务栏缩略图的大小
    微擎 钻石投票
    发卡系统
    支付宝当面付
    django 多个admin 展示不同model 定制
    Django Admin:如何清除“最近的动作”面板
    tomcat正常运行一段时间后,突然访问不了项目了, 其它根页面报404错误
  • 原文地址:https://www.cnblogs.com/wuqilang/p/14946426.html
Copyright © 2011-2022 走看看