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 相关文章推荐
Extjs Ext.MessageBox.confirm 确认对话框详解
Apr 02 Javascript
js 中{},[]中括号,大括号使用详解
May 12 Javascript
javascript实现table选中的行以指定颜色高亮显示的方法
May 13 Javascript
jquery中validate与form插件提交的方式小结
Mar 26 Javascript
javascript用正则表达式过滤空格的实现代码
Jun 14 Javascript
Javascript 引擎工作机制详解
Nov 30 Javascript
BootStrap 弹出层代码
Feb 09 Javascript
基于Bootstrap漂亮简洁的CSS3价格表(附源码下载)
Feb 28 Javascript
js 奇葩技巧之隐藏代码
Aug 11 Javascript
详解基于webpack&amp;gettext的前端多语言方案
Jan 29 Javascript
Koa日志中间件封装开发详解
Mar 09 Javascript
JavaScript实现省市联动效果
Nov 22 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
php数组函数序列之array_pop() - 删除数组中的最后一个元素
2011/11/07 PHP
php中文乱码怎么办如何让浏览器自动识别utf-8
2014/01/15 PHP
ASP和PHP实现生成网站快捷方式并下载到桌面的方法
2014/05/08 PHP
基于PHP实现通过照片获取ip地址
2016/04/26 PHP
PHP笛卡尔积实现算法示例
2018/07/30 PHP
PHP实现的服务器一致性hash分布算法示例
2018/08/09 PHP
Javascript里使用Dom操作Xml
2006/09/20 Javascript
js获取input标签的输入值实现代码
2013/08/05 Javascript
解析Javascript中大括号“{}”的多义性
2013/12/02 Javascript
js实现右下角提示框的方法
2015/02/03 Javascript
Jquery中offset()和position()的区别分析
2015/02/05 Javascript
使用jquery清空、复位整个输入域
2015/04/02 Javascript
Javascript获取统一管理的提示语(message)
2016/02/03 Javascript
深入理解JS addLoadEvent函数
2016/05/20 Javascript
javascript字符串对象常用api函数小结(连接,替换,分割,转换等)
2016/09/20 Javascript
详解AngularJs HTTP响应拦截器实现登陆、权限校验
2017/04/11 Javascript
vue + vuex todolist的实现示例代码
2018/03/09 Javascript
create-react-app 修改为多入口编译的方法
2018/08/01 Javascript
微信小程序实现跑马灯效果
2020/10/21 Javascript
PWA介绍及快速上手搭建一个PWA应用的方法
2019/01/27 Javascript
JS实现数组删除指定元素功能示例
2019/06/05 Javascript
vue.js实现回到顶部动画效果
2019/07/31 Javascript
javascript头像上传代码实例
2019/09/28 Javascript
在Python的Flask中使用WTForms表单框架的基础教程
2016/06/07 Python
Python中的错误和异常处理简单操作示例【try-except用法】
2017/07/25 Python
python 动态加载的实现方法
2017/12/22 Python
Opencv+Python 色彩通道拆分及合并的示例
2018/12/08 Python
python实现贪吃蛇小游戏
2020/03/21 Python
python 数据分析实现长宽格式的转换
2020/05/18 Python
英国著名国际平价时尚男装品牌:Topman
2016/08/27 全球购物
说出一些常用的类,包,接口
2014/09/22 面试题
大学生职业规划论文
2014/01/11 职场文书
十八届三中全会宣传方案
2014/02/21 职场文书
财务部岗位职责
2015/02/03 职场文书
团员个人年度总结
2015/02/26 职场文书
你离财务总监还有多远?速览CFO的岗位职责
2019/11/18 职场文书