Vuex 严格模式下 form表单处理 比官网更好的办法

Vuex form表单处理 比官网更好的办法

问题, 当使用vuex的state作为表单的v-model元素, 虽然简单粗暴, 但这种修改没有经过mutation方法. 在严格模式下会抛出错误

目录

1. 错误提示

错误代码如下

Vuex 严格模式下 form表单处理 比官网更好的办法插图

[Vue warn]: Error in callback for watcher “function () { return this._data.$$state }”: “Error: [vuex] do not mutate vuex store state outside mutation handlers.”

2. 相关场景

vuex中相关代码

const state = ()=>({
  user: {
    username: '123',
    password: '123',
  }
});

const getters = {
  userName: state=>state.userName,
  user: state=>state.user,
};

const mutations = {
  changeObject(state, payload){
    // es6语法
    state.user = {...state.user, ...payload};
  },
};

其中定义了user变量

组件中相关代码

// 获取vuex中user
...mapGetters('module1', [
    'user',
]),
// 改变vuex中user状态
...mapMutations('module1', [
    'changeObject',
]),
    

3. 官网建议方法

  • <input> 中绑定 value,然后侦听 input 或者 change 事件,在事件回调中调用一个方法
  • 另一个方法是使用带有 setter 的双向绑定计算属性
// ...
computed: {
  message: {
    get () {
      return this.$store.state.obj.message
    },
    set (value) {
      this.$store.commit('updateMessage', value)
    }
  }
}

这两种方法都有一种很大的缺陷, 必须定义每个输入元素的变量, 比如, 现在有个表单, 里面有20个元素, 那么此时就要写20个方法来响应输入框的变化, 作为工匠人, 不得不采取更好的办法

4. 解决方案

个人在网上找了一些解决方案, 有用proxy代理, 有封装一些方法的, 这些在我看来, 都挺勉强的

经过一系列尝试, 我改良了官网描述的第二种方法, 将表单元素与vuex双向绑定, 并且经过了mutation, 严格模式下不报错

核心代码如下

定义表单对象

// 定义在computed下
object: {
 set(val){
   // console.log(val);
   this.changeObject(val);
 },
  //这里需要注意, 获取的是user信息, 并非对象, 采用扩展运算符处理
  get(){
   return {...this.user}
  }
}

获取表单变化代码

<form :model="object" @input="inputChange">
  <input type="text" v-model="object.username">
  <input type="text" v-model="object.password">
</form>

// ... methods中方法
inputChange(){
  this.object = {...this.object}
},

5. 整体解释

  1. vuex定义username和password
  2. object 通过 get 获取到username和password进行初始化
  3. 表单输入触发inputChange方法改变 object 对象, 触发object对象的 set 方法
  4. object的 set 方法改变了 vuex中的值
  5. vuex 值发生改变, 从而触发 object 的 get 方法
  6. object值发生改变, 从而形成一个循环链

Vuex 严格模式下 form表单处理 比官网更好的办法插图(1)

  1. 初始状态

Vuex 严格模式下 form表单处理 比官网更好的办法插图(2)

  1. 改变username后的状态

Vuex 严格模式下 form表单处理 比官网更好的办法插图(3)

  1. 改变password后的状态

Vuex 严格模式下 form表单处理 比官网更好的办法插图(4)

原创文章,作者:迷途资源,如若转载,请注明出处:https://www.mipng.com/535.html

这些信息可能会帮助到你: 下载帮助 | 报毒说明 | 进站必看

修改版本安卓软件,加群提示为修改者自留,非本站信息,注意鉴别

发表评论

邮箱地址不会被公开。 必填项已用*标注

评论列表(3条)

  • SendBulkMails.com
    SendBulkMails.com 2021年2月26日 上午9:40

    SendBulkMails.com allows you to reach out to clients via cold email marketing.

    – 1Mil emails starter package
    – Dedicated IP and Domain Included

    – Detailed statistical reports (delivery, bounce, clicks etc.)

    – Quick and easy setup with extended support at no extra cost.

    – Cancel anytime!

    SendBulkMails.com

  • Larhonda Gillies
    Larhonda Gillies 2021年3月9日 下午3:44

    Hey,

    Listen, business is tough right now for most people.

    Does this sound like your situation?

    -Not enough quality leads?
    -Not enough revenue?
    -Always looking for more business?
    -Working too hard?

    I have the solution to help make this a great year for your business.

    I will show you how to Drive Revenue, Sales and Commissions…during the day and more importantly while you sleep…

    ==> https://sesforyou.com

    Regards,
    SesForYou.com

  • Marlon Buchholz
    Marlon Buchholz 2021年3月29日 下午9:21

    Need extra income?

    A fully hosted, done for you content + monetisation and a stunning design web based software that creates a fully automated done for you cryptocurrency affiliate site,

    Visit us: https://warriorplus.com/o2/a/f5s4y/0