Vue唯一可以更改状态管理实例中状态数据状态的属性对象变化的讲解

更改状态管理的商店中的状态的唯一方法是提交突变。

状态管理中的变化非常类似于事件：

每个变化都有一个字符串的事件类型（类型)和一个回调函数（处理程序).这个回调函数就是我们实际进行状态更改的地方，并且它会接受状态作为第一个参数突变。必须是同步函数。

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

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

store.js

突变： { //商品价格减半；更改这个数据状态必须将这个数据源状态传递过来goodsPriceHalve : state={让goodsPriceHalve=state。古德斯特。map(CurrentValue={ return { name : CurrentValue。名称、价格： currentValue.price/2 } })州。goodslist=goodsPriceHalve减半；} }第5.vue页

要唤醒一个突变处理器，你需要以相应的类型（事件)调用存储。提交方法。

模板div h2我是第三个页面/h2！-直接在超文本标记语言标签中使用-div { { $ store。国家。goodslist } }/div br路由器-链接到='/第6页'更改商品名字/路由器-链路br按钮@ click=' handleGoodsHavle '商品价格减半/button ul class=' ul _ list ' Li v-for=' goodsListHalv ' p class=' name '中的项目商品：{{item.name}}/p p class='price '价格：{ { item }。价格} }/p/Li/ul/div/模板脚本导出默认值{ data() { return { /* //突变不能通过直接赋值的形式改变状态的数据状态goodsListHalv:这个$store.state.goodsList，*///goodsListHalv: [] } }，/* //突变不能通过钩子函数的形式进行赋值mounted(){ this。goodslisthalv=这个.$store.state.goodsList }，*///通过计算属性的方式，是完美的computed : { goodslistalv(){ 0返回此$商店。国家。goodslist} }，方法： { handlegoodshavel : function(){//这里只通过事件改变数据的状态这个$商店。提交(' goodsprisehalve ')} } }/脚本效果图

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

参数：字符串/对象

这里修改商品名字。

store.js

//通过组件上的事件，通过这个$store.commit('突变中的函数','需要从组件上传递给变化中这个函数的参数)突变： { //统一修改商品的名称；变更名称（状态、有效负载)参数一个州：数据源，参数2有效载荷：接收的参数变更名称：(状态，有效负载)={ var changeName=state。古德斯特。map(CurrentValue={ return { name :有效负载，//接收参数价格： currentValue.price/2 } })州。goodslist=更改名称；} }这里的载荷有效载荷可以是一个对象/字符串。

第6页。某视频剪辑软件

模板div h2我是第四个页面/h2 div输入类型=“文本”占位符='请输入商品的新名字v-model=' invalue '按钮@click='changeGoodsName()'商品价格减半/button/div router-link to='/page 7 ' action/router-link ul class=' ul _ list ' Li v-for=' goodsListHalv ' p class=' name '中的项目商品：{{item.name}}/p p class='price '价格：{ { item }。价格} }/p/Li/ul/div/模板脚本导出默认值{ data(){ return { invalue : ' '，} }，computed : { goodslistalv(){ return this .$商店。国家。goodslist} }，methods: { //通过点击事件触发方法中的函数，进而改变store.js中数据的状态变更商品名称：函数(){ //这个.$store.commit('需要操作突变中的函数名','从这个组件传递给第一个参数的参数)这个$store.commit('changeName '，这个。invalue)} } }/script这里的载荷有效载荷就是输入框的值。

效果图

代码执行过程

以上突变执行过程如下：点击按钮——执行组件中点击按钮的事件方法——执行$ store . submit(' vuex中突变对象中对应的函数名，要传递的参数)执行突变中对应的方法——修改状态中对应的数据——渲染页面。

变异服从Vue的反应规则

由于Vuex商店中的状态是响应的，当我们更改状态时，监控状态的Vue组件将自动更新。这也意味着Vuex的突变也需要遵守一些预防措施，比如使用Vue:

最好提前初始化您的商店中所有必需的属性。当需要给对象添加新属性时，应该使用Vue.set(obj，' newProp '，123)，或者用新对象替换旧对象。例如，使用stage-3的对象扩展运算符，我们可以这样写：

State.obj={.state.obj，new prop: 123}摘要

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