vuex中mutations的应用有哪些，有何用
导读：这篇文章主要给大家介绍“vuex中mutations的应用有哪些，有何用”的相关知识，下文通过实际案例向大家展示操作过程，内容简单清晰，易于学习，有这方面学习需要的朋友可以参考，希望这篇“vuex中mutations的应用有哪些，有何用”文...
这篇文章主要给大家介绍“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的应用有哪些，有何用”已经有了进一步的了解，更多相关的问题，欢迎关注网络或到官网咨询客服。
声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！
若转载请注明出处： vuex中mutations的应用有哪些，有何用
本文地址： https://pptw.com/jishu/652431.html