Vue唯一可以更改vuex实例中state数据状态的属性对象Mutation的讲解


Posted in Javascript onJanuary 18, 2019

更改 Vuex 的 store 中的状态的唯一方法是提交 mutation。

Vuex 中的 mutation 非常类似于事件:

每个 mutation 都有一个字符串的 事件类型 (type) 和 一个 回调函数 (handler)。这个回调函数就是我们实际进行状态更改的地方,并且它会接受 state 作为第一个参数。mutation 必须是同步函数。

不带载荷(只改变数据的状态)

接前面几篇文章的例子,这里我们修改商品价格减半。

store.js

mutations: {
    //商品价格减半;更改这个数据状态必须将这个数据源state传递过来
    goodsPriceHalve: state => {
      let goodsPriceHalve = state.goodsList.map(currentValue => {
        return {
          name: currentValue.name,
          price: currentValue.price/2
        }
      })
      state.goodsList = goodsPriceHalve;
    }
  }

page5.vue

要唤醒一个 mutation handler,你需要以相应的 type(事件) 调用 store.commit 方法。

<template>
  <div>
    <h2>我是第三个页面</h2>
    <!-- 直接在HTML标签中使用 -->
    <div>{{$store.state.goodsList}}</div>
    <br>
    <router-link to='/page6'>更改商品名字</router-link>
    <br>
    <button @click="handleGoodsHavle">商品价格减半</button>
    <ul class="ul_list">
      <li v-for="item in goodsListHalv">
        <p class="name">商品:{{item.name}}</p>
        <p class="price">价格:¥{{item.price}}</p>
      </li>
    </ul>
  </div>
</template>
<script>
 export default {
   data() {
    return {
      /*
      // mutations不能通过直接赋值的形式改变state的数据状态
      goodsListHalv: this.$store.state.goodsList,
      */
      // goodsListHalv: []
    }
   },
   /*
  //  mutations不能通过钩子函数的形式进行赋值
   mounted(){
     this.goodsListHalv = this.$store.state.goodsList
  },
  */
  // 通过计算属性的方式,是完美的
   computed: {
     goodsListHalv(){
       return this.$store.state.goodsList;
     }
   },
   methods: {
     handleGoodsHavle: function(){
       //这里只通过事件改变数据的状态
        this.$store.commit('goodsPriceHalve')
     }
   }
  }
</script>

效果图

Vue唯一可以更改vuex实例中state数据状态的属性对象Mutation的讲解

提交载荷(Payload)(改变数据状态的同时传递参数)

参数:字符串/对象

这里修改商品名字。

store.js

// 通过组件上的事件,通过this.$store.commit('mutations中的函数','需要从组件上传递给 mutation中这个函数的参数')
  mutations: {
    // 统一修改商品的名称;changeName(state,payload)参数1 state:数据源,参数2 payload:接收的参数
    changeName: (state,payload) => {
      var changeName = state.goodsList.map(currentValue => {
        return {
          name: payload,//接收参数
          price: currentValue.price/2
        }
      })
      state.goodsList = changeName;
    }
  }

这里的载荷payload可以是一个对象/字符串。

page6.vue

<template>
  <div>
    <h2>我是第四个页面</h2>
    <div>
      <input type="text" placeholder="请输入商品的新名字" v-model="inpValue">
      <button @click="changeGoodsName()">商品价格减半</button>
    </div>
    <router-link to='/page7'>action</router-link>
    <ul class="ul_list">
      <li v-for="item in goodsListHalv">
        <p class="name">商品:{{item.name}}</p>
        <p class="price">价格:¥{{item.price}}</p>
      </li>
    </ul>
  </div>
</template>
<script>
 export default {
   data() {
    return {
      inpValue:'',
    }
   },
   computed: {
     goodsListHalv(){
       return this.$store.state.goodsList;
     }
   },
   methods: {
    //  通过 click事件触发methods中的函数,进而改变store.js中数据的状态
     changeGoodsName: function(){
        // this.$store.commit('需要操作mutations中的函数名','从这个组件传递给第一个参数的参数')
        this.$store.commit('changeName',this.inpValue)
     }
   }
  }
</script>

这里的载荷payload就是输入框的值。

效果图

Vue唯一可以更改vuex实例中state数据状态的属性对象Mutation的讲解

代码执行过程

上面的Mutation执行过程是:按钮点击?>执行组件中按钮点击事件方法?>执行$store.commit('vuex中mutatioms对象中对应的函数名',需要传递的参数)?>执行mutations里面对应的方法?>修改state里面对应的数据?>页面渲染。

Mutation 需遵守 Vue 的响应规则

既然 Vuex 的 store 中的状态是响应式的,那么当我们变更状态时,监视状态的 Vue 组件也会自动更新。这也意味着 Vuex 中的 mutation 也需要与使用 Vue 一样遵守一些注意事项:

最好提前在你的 store 中初始化好所有所需属性。当需要在对象上添加新属性时,你应该使用 Vue.set(obj, 'newProp', 123), 或者以新对象替换老对象。例如,利用 stage-3 的对象展开运算符我们可以这样写:

state.obj = { ...state.obj, newProp: 123 }

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,谢谢大家对三水点靠木的支持。如果你想了解更多相关内容请查看下面相关链接

Javascript 相关文章推荐
让ie运行js时提示允许阻止内容运行的解决方法
Oct 24 Javascript
分享一个自定义的console类 让你不再纠结JS中的调试代码的兼容
Apr 20 Javascript
利用jq让你的div居中的好方法分享
Nov 21 Javascript
JavaScript实现in-place思想的快速排序方法
Aug 07 Javascript
常用js,css文件统一加载方法(推荐) 并在加载之后调用回调函数
Sep 23 Javascript
在JSP中如何实现MD5加密的方法
Nov 02 Javascript
ionic开发中点击input时键盘自动弹出
Dec 23 Javascript
原生JS+Canvas实现五子棋游戏实例
Jun 19 Javascript
layui实现数据表格table分页功能(ajax异步)
Jul 27 Javascript
解决layui数据表格Date日期格式的回显Object的问题
Sep 19 Javascript
Vue+tracking.js 实现前端人脸检测功能
Apr 16 Javascript
Javascript异步流程控制之串行执行详解
Sep 27 Javascript
JavaScript数据结构之栈实例用法
Jan 18 #Javascript
Vue核心概念Action的总结
Jan 18 #Javascript
js取小数点后两位四种方法
Jan 18 #Javascript
jQuery移动端跑马灯抽奖特效升级版(抽奖概率固定)实现方法
Jan 18 #jQuery
jquery获取file表单选择文件的路径、名字、大小、类型
Jan 18 #jQuery
jQuery实现适用于移动端的跑马灯抽奖特效示例
Jan 18 #jQuery
js数组去重的方法总结
Jan 18 #Javascript
You might like
Mysql的常用命令
2006/10/09 PHP
php下几个常用的去空、分组、调试数组函数
2009/02/22 PHP
PHP获取本周第一天和最后一天示例代码
2014/02/24 PHP
php冒泡排序、快速排序、快速查找、二维数组去重实例分享
2014/04/24 PHP
php截取字符串函数分享
2015/02/02 PHP
PHP Socket网络操作类定义与用法示例
2017/08/30 PHP
自定义Laravel (monolog)日志位置,并增加请求ID的实现
2019/10/17 PHP
laravel 解决强制跳转 https的问题
2019/10/22 PHP
JQUERY操作JSON实例代码
2010/02/09 Javascript
js 点击按钮弹出另一页,选择值后,返回到当前页
2010/05/26 Javascript
js过滤HTML标签以及空格的思路及代码
2013/05/24 Javascript
如何让页面加载完成后执行js
2013/06/26 Javascript
面向对象设计模式的核心法则
2013/11/10 Javascript
js模仿php中strtotime()与date()函数实现方法
2015/08/11 Javascript
Jquery基础之事件操作详解
2016/06/14 Javascript
JavaScript html5利用FileReader实现上传功能
2020/03/27 Javascript
vue注册组件的几种方式总结
2018/03/08 Javascript
一些可能会用到的Node.js面试题
2019/06/15 Javascript
node.js中Buffer缓冲器的原理与使用方法分析
2019/11/23 Javascript
js中延迟加载和预加载的具体使用
2021/01/14 Javascript
[01:21]DOTA2新纪元-7.0新版本即将开启!
2016/12/11 DOTA
Python3编程实现获取阿里云ECS实例及监控的方法
2017/08/18 Python
Pytorch训练过程出现nan的解决方式
2020/01/02 Python
关于Python字符编码与二进制不得不说的一些事
2020/10/04 Python
罗德与泰勒百货官网:Lord & Taylor
2016/08/12 全球购物
卡骆驰新加坡官网:Crocs新加坡
2018/06/12 全球购物
学历公证委托书
2014/04/09 职场文书
专家推荐信模板
2014/05/09 职场文书
国庆促销活动总结
2014/08/29 职场文书
委托书范本
2014/09/13 职场文书
国庆节演讲稿范文2014
2014/09/19 职场文书
2014年财务个人工作总结
2014/12/08 职场文书
龙门石窟导游词
2015/02/02 职场文书
社区五一劳动节活动总结
2015/02/09 职场文书
2015年检验员工作总结范文
2015/04/30 职场文书
竞选稿之小学班干部
2019/10/31 职场文书