vuex中mutations的应用有哪些，有何用-群英

vuex中mutations的应用有哪些，有何用

Admin发表于 2022-11-19 17:51:50570 次浏览

这篇文章主要给大家介绍“vuex中mutations的应用有哪些，有何用”的相关知识，下文通过实际案例向大家展示操作过程，内容简单清晰，易于学习，有这方面学习需要的朋友可以参考，希望这篇“vuex中mutations的应用有哪些，有何用”文章能对大家有所帮助。

mutations状态更新

vuex中的store状态更新唯一方式：提交Mutation

Mutation主要包括两部分：

字符串的事件类型（type）
一个回调函数（handler），该回调函数的第一个参数为state

mutations传递参数

在通过mutations更新数据的时候，我们可能需要携带一些额外的参数
参数被称作mutations是载荷（Payload）

例子：第一个按钮点击counter+5，第二个按钮点击counter+10

App.vue文件

<button @click="addCount(5)">+5</button>
<button @click="addCount(10)">+10</button>
 登录后复制

store文件中的index.js文件

 mutations: {
    incrementCount(state, count) {
      state.counter += count
    }
  },
 登录后复制

App.vue文件

methods: {
    addCount(count) {
      this.$store.commit("incrementCount", count);
    }
  }
 登录后复制

mutations提交风格

普通提交风格

this.$store.commit("incrementCount", count);
 登录后复制

这样提交，如果打印count，得到的是count

incrementCount(state, count) {
      // state.counter += count
      console.log(count);
    }
 登录后复制

特殊的提交风格

this.$store.commit({
        type: "incrementCount",
        count
      });
 登录后复制  登录后复制

如果打印count，得到的是一个对象

    incrementCount(state, count) {
      // state.counter += count
      console.log(count);
    }
 登录后复制

所以在mutations中这样比较合适

incrementCount(state, payload) {
      state.counter += payload.count
      console.log(payload.count);
    }
 登录后复制

App.vue中提交

this.$store.commit({
        type: "incrementCount",
        count
      });
 登录后复制  登录后复制

mutations响应规则

vuex中的state是响应式的，当state中数据发生改变时，vue组件会自动更新。

当我们改变原有对象中的值时，页面也会发生改变

state: {
    info: {
      name: 2401,
      age: 18
    }
  },
   mutations: {
    // 改变info中的值
    infoChange(state) {
      state.info.age = 10
    }
  },
 登录后复制

在App.vue中

<h2>{{$store.state.info}}</h2>
<button @click="infoChange">infoChange</button>
 登录后复制

 infoChange() {
      this.$store.commit("infoChange");
    }
 登录后复制

向原有对象增加值

不能做到响应式的方法

state.info['address'] = '地球';
 登录后复制

其实address已经被加到info中了，但是这样的方法做不到响应式，所以在页面上没有显示响应式方法

Vue.set(state.info, "address", '地球');
 登录后复制

删除原有对象中的值

不能做到响应式的方法

delete state.info.age;
 登录后复制

其实info中age已经被删除，但是这样的方法做不到响应式，所以页面上还存在age

响应式方法

Vue.delete(state.info, "age")
 登录后复制

mutations常量类型

官方推荐，将mutations中的方法名都定义为常量，不容易出错，也便于管理维护

在store文件下创建mutations-type.js文件，存放常量

export const INCREMENT = "increment"
export const DECREMENT = "decrement"
 登录后复制

在store文件下的index.js文件中导入并使用

import {
  INCREMENT,
  DECREMENT
} from "../store/mutations-type"
 登录后复制

 mutations: {
    [INCREMENT](state) {
      state.counter++;
    },
    [DECREMENT](state) {
      state.counter--;
    },
  }
 登录后复制

在App.vue文件中导入并使用

import { INCREMENT, DECREMENT } from "../src/store/mutations-type";
 登录后复制

methods: {
    add() {
      this.$store.commit(INCREMENT);
    },
    sub() {
      this.$store.commit(DECREMENT);
    },
   }

通过以上内容的阐述，相信大家对“vuex中mutations的应用有哪些，有何用”已经有了进一步的了解，更多相关的问题，欢迎关注群英网络或到群英官网咨询客服。

免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：mmqy2019@163.com进行举报，并提供相关证据，查实之后，将立刻删除涉嫌侵权内容。

标签： mutations

上一篇： slot基本使用是什么，组件的插槽有何用？

下一篇： Vue中的computed属性如何使用，可以用做什么