原文网址：Vuex--mutations--使用/教程/实例_IT利刃出鞘的博客-CSDN博客

简介

说明

本文用示例介绍Vuex的五大核心之一：mutations。

官网

Mutation | Vuex

API 参考 | Vuex

mutations概述

mutations是vuex里唯一可以改变state数据的方法。

有多个对象，里边包含多个直接更新 state 的方法(回调函数)

触发方式: action 中的 commit(‘mutation 名称’)

只能包含同步代码, 不能写异步代码。

用法

直接使用

//在JS中使用
this.$store.commit('mutations方法名', 具体值)        // 不分模块
this.$store.commit('模块名/mutations方法名', 具体值) // 分模块//在模板中使用
$store.commit('mutations方法名', 具体值)        // 不分模块
$store.commit('模块名/mutations方法名', 具体值) // 分模块

mapMutations

import { mapMutations } from 'vuex'
export default {computed: {// 不分模块...mapMutations(['mutations方法名'])// 分模块，不修改方法名...mapMutations('模块名', ['mutations方法名'])// 不分模块，不修改方法名...mapMutations('模块名', {'新mutation方法名': 'mutation方法名'})}
}

示例

CounterStore.js

import Vue from 'vue';
import Vuex from 'vuex';Vue.use(Vuex);
const counterStore = new Vuex.Store({state: {count: 10},getters: {doubleCount(state) {return state.count * 2;}},mutations: {increment(state) {state.count++;},decrement(state) {state.count--;},// 带参数addNumber(state, param1) {state.count += param1;},},}
);export default counterStore;

Parent.vue（父组件，是个入口组件）

<template><div class="outer"><h3>父组件</h3><component-a></component-a><component-b></component-b></div>
</template><script>
import ComponentA from "./ComponentA";
import ComponentB from "./ComponentB";export default {name: 'Parent',components: {ComponentA, ComponentB},
}
</script><style scoped>
.outer {margin: 20px;border: 2px solid red;padding: 20px;
}
</style>

ComponentA.vue（改变vuex的数据）

<template><div class="container"><h3>ComponentA</h3><button @click="thisIncrement">加1</button><button @click="thisDecrement">减1</button><button @click="thisAddNumber">增加指定的数</button></div>
</template><script>
export default {data() {return {cnt: 5}},methods:{thisIncrement() {this.$store.commit('increment')},thisDecrement() {this.$store.commit('decrement')},thisAddNumber() {this.$store.commit('addNumber', this.cnt)}}
}
</script><style scoped>
.container {margin: 20px;border: 2px solid blue;padding: 20px;
}
</style>

ComponentB.vue（读取vuex的数据）

<template><div class="container"><h3>ComponentB</h3><div>计数器的值：{{thisCount}}</div><div>计数器的2倍：{{thisDoubleCount}}</div></div>
</template><script>
export default {computed:{thisCount() {return this.$store.state.count;},thisDoubleCount() {return this.$store.getters.doubleCount;},}
}
</script><style scoped>
.container {margin: 20px;border: 2px solid blue;padding: 20px;
}
</style>

路由（router/index.js）

import Vue from 'vue'
import Router from 'vue-router'
import Parent from "../components/Parent";Vue.use(Router)export default new Router({routes: [{path: '/parent',name: 'Parent',component: Parent,}],
})

测试

访问：http://localhost:8080/#/parent

Vuex--mutations--使用/教程/实例相关推荐

Vuex--mapState, mapGetters, mapActions, mapMutations--使用/教程/实例
原文网址:Vuex--mapState, mapGetters, mapActions, mapMutations--使用/教程/实例_IT利刃出鞘的博客-CSDN博客简介说明本文用示例介绍Vu ...
Vue--Vuex--使用/教程/实例
原文网址:Vue--Vuex--使用/教程/实例_IT利刃出鞘的博客-CSDN博客简介说明本文介绍Vue的插件:Vuex.包括:优缺点.使用场景.示例. 官网官网文档 API vuex-st ...
adc 接收cube_官方的stm32cube软件教程实例ADC操作代码（官方自带的，可以无视
该楼层疑似违规已被系统折叠隐藏此楼查看此楼官方的stm32cube软件教程实例ADC操作代码(官方自带的,可以无视),看不懂怎么用的可以等本贴吧更新图片教程,现在就是凑帖子数量,完成转职的,请谅解 ...
Java-Runoob-高级教程-实例-数组：01. Java 实例 – 数组排序及元素查找
ylbtech-Java-Runoob-高级教程-实例-数组:01. Java 实例 – 数组排序及元素查找 1.返回顶部 1. Java 实例 - 数组排序及元素查找 Java 实例以下实例演示 ...
Java-Runoob-高级教程-实例-字符串：13. Java 实例 - 字符串格式化
ylbtech-Java-Runoob-高级教程-实例-字符串:13. Java 实例 - 字符串格式化 1.返回顶部 1. Java 实例 - 字符串格式化 Java 实例以下实例演示了通过 f ...
单片机独立式按键c语言程序,(原创)51单片机C语言程序设计--速学教程实例(入门篇)之独立按键(查询)...
(原创)51单片机C语言程序设计--速学教程实例(入门篇)之独立按键(查询) /************************************************************ ...
Flex 布局教程实例
Flex 布局教程实例一.Flex 布局是什么? Flex 是 Flexible Box 的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性. 任何一个容器都可以指定为 F ...
Java-Runoob-高级教程-实例-数组：10. Java 实例 – 查找数组中的重复元素-un
ylbtech-Java-Runoob-高级教程-实例-数组:10. Java 实例 – 查找数组中的重复元素 1.返回顶部 1. Java 实例 - 查找数组中的重复元素 Java 实例以下实例 ...
Vue Vuex的详细教程
Vue Vuex的详细教程 Vuex 是什么? Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式.它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变 ...

Vuex--mutations--使用/教程/实例

简介

mutations概述

用法

示例

Vuex--mutations--使用/教程/实例相关推荐

最新文章

热门文章