第四十二章 Vue中使用mutations修改Vuex仓库数据

news/2024/11/14 2:54:07/

目录

一、mutations修改仓库数据

1.1. 概述

1.2. mutations修改数据基本步骤

1.3. 完整代码

1.3.1. main.js

1.3.2. App.vue

1.3.3. index.js

1.3.4. Son1.vue

1.3.5. Son2.vue

二、mutations传参语法

2.1. mutations传参基本步骤

2.2. 完整代码

2.2.1. index.js

2.2.2. Son1.vue

三、输入框和Store仓库数据双向绑定

 1.3.1. main.js

1.3.2. App.vue

1.3.3. index.js

1.3.4. Son1.vue

1.3.5. Son2.vue

一、mutations修改仓库数据

1.1. 概述

在Vue中，明确vuex同样遵循单向数据流，即组件中不能直接修改仓库的数据，我们可以通过 strict: true 可以开启严格模式，防止在组件中非法修改仓库数据。

this.$store.state.count++ (错误写法)

在Vue中，组件想要修改Vuex的数据，可以通过Vue提供的mutations来实现。本章节我们将通过掌握mutations的操作流程，来修改state数据。 (state数据的修改只能通过mutations )

1.2. mutations修改数据基本步骤

1. 定义 mutations 对象，对象中存放修改 state 的方法

2. 组件中提交调用 mutations

1.3. 完整代码

1.3.1. main.js

import Vue from 'vue'
import App from './App.vue'
import store from '@/store/index'
console.log(store.state.count)Vue.config.productionTip = falsenew Vue({render: h => h(App),store
}).$mount('#app')

1.3.2. App.vue

<template><div id="app"><h1>根组件 - {{ title }} - {{ count }}</h1><input type="text"><Son1></Son1><hr><Son2></Son2></div>
</template><script>
import Son1 from './components/Son1.vue'
import Son2 from './components/Son2.vue'
import { mapState } from 'vuex'export default {name: 'app',created () {console.log(this.$store.state.count)},data () {return {}},computed: {...mapState(['count', 'title'])},components: {Son1,Son2}
}
</script><style></style>

1.3.3. index.js

// 存放的是vuex相关的核心代码
import Vue from 'vue'
import Vuex from 'vuex'// 配置插件给Vue使用
Vue.use(Vuex)// 创建仓库（空仓库）
const store = new Vuex.Store({// 严格模式（有利于初学者，检测不规范的代码 => 上线的时候可以去掉）strict: true,// 1. 通过 state提供数据（所有组件可以共享）state: {title: '大标题',count: 100},// 2. 通过 mutations 可以提供修改数据的方法mutations: {// 所有mutation函数，第一个参数，都是 stateaddCount (state) {// 修改数据state.count += 1},addFive (state) {state.count += 5},changeTitle (state) {state.title = '小标题'}}
})// 导出给main.js使用
export default store

1.3.4. Son1.vue

<template><div class="box"><h2>{{ $store.state.title }}</h2>从vuex中获取的值：<label>{{ $store.state.count }}</label><br><button @click="handleAdd">值 + 1</button><button @click="addFive">值 + 5</button><button @click="changeTitle">改标题</button></div>
</template><script>
export default {name: 'Son1Com',methods: {handleAdd () {// 错误代码（vue默认不会监测，监测需要成本）// this.$store.state.count++// console.log(this.$store.state.count)// 应该通过 mutation 核心概念，进行修改仓库数据// 需要提交调用mutationthis.$store.commit('addCount')},addFive () {this.$store.commit('addFive')},changeTitle () {this.$store.commit('changeTitle')}}
}
</script><style lang="css" scoped>
.box {border: 3px solid #ccc;width: 400px;padding: 10px;margin: 20px;
}
h2 {margin-top: 10px;
}
</style>

1.3.5. Son2.vue

<template><div class="box"><h2>Son2 子组件</h2>从vuex中获取的值：<label>{{ count }}</label><br><button>值 - 1</button></div></template><script>
import { mapState } from 'vuex'
export default {name: 'Son2Com',computed: {...mapState(['count'])}
}
</script><style lang="css" scoped>
.box {border: 3px solid #ccc;width: 400px;padding: 10px;margin: 20px;
}
h2 {margin-top: 10px;
}
</style>

二、mutations传参语法

2.1. mutations传参基本步骤

提交mutation还可以传递参数  `this.$store.commit( 'xxx', 参数 )`

1. 提供 mutation 函数 (带参数 - 提交载荷 payload )

2. 页面中提交调用 mutation

注：提交参数只能一个，如果有多个参数，需要将该参数包装成一个对象传递

2.2. 完整代码

2.2.1. index.js

// 存放的是vuex相关的核心代码
import Vue from 'vue'
import Vuex from 'vuex'// 配置插件给Vue使用
Vue.use(Vuex)// 创建仓库（空仓库）
const store = new Vuex.Store({// 严格模式（有利于初学者，检测不规范的代码 => 上线的时候可以去掉）strict: true,// 1. 通过 state提供数据（所有组件可以共享）state: {title: '大标题',count: 100},// 2. 通过 mutations 可以提供修改数据的方法mutations: {// 所有mutation函数，第一个参数，都是 stateaddCount (state, n) {// 修改数据state.count += n},subCount (state, n) {// 修改数据state.count -= n},changeTitle (state, obj) {state.title = obj.newTitle}}
})// 导出给main.js使用
export default store

2.2.2. Son1.vue

<template><div class="box"><h2>{{ $store.state.title }}</h2>从vuex中获取的值：<label>{{ $store.state.count }}</label><br><button @click="handleAdd(1)">值 + 1</button><button @click="handleAdd(5)">值 + 5</button><button @click="handleAdd(10)">值 + 10</button><button @click="handleSub(1)">值 - 1</button><button @click="handleSub(5)">值 - 5</button><button @click="handleSub(10)">值 - 10</button><button @click="changeTitle">改标题</button></div>
</template><script>
export default {name: 'Son1Com',methods: {handleAdd (n) {// 错误代码（vue默认不会监测，监测需要成本）// this.$store.state.count++// console.log(this.$store.state.count)// 应该通过 mutation 核心概念，进行修改仓库数据// 需要提交调用mutationthis.$store.commit('addCount', n)},handleSub (n) {this.$store.commit('subCount', n)},changeTitle () {this.$store.commit('changeTitle', { name: '王哲晓', newTitle: '2024加油，迎接新的开始，新的起点，新的人生' })}}
}
</script><style lang="css" scoped>
.box {border: 3px solid #ccc;width: 400px;padding: 10px;margin: 20px;
}
h2 {margin-top: 10px;
}
</style>

三、输入框和Store仓库数据双向绑定

 1.3.1. main.js

import Vue from 'vue'
import App from './App.vue'
import store from '@/store/index'
console.log(store.state.count)Vue.config.productionTip = falsenew Vue({render: h => h(App),store
}).$mount('#app')

1.3.2. App.vue

<template><div id="app"><h1>根组件 - {{ title }} - {{ count }}</h1><input :value="count" @input="handleInput" type="text"><Son1></Son1><hr><Son2></Son2></div>
</template><script>
import Son1 from './components/Son1.vue'
import Son2 from './components/Son2.vue'
import { mapState } from 'vuex'export default {name: 'app',created () {console.log(this.$store.state.count)},data () {return {}},methods: {handleInput (e) {// 1.实时获取输入框的值const num = e.target.value// 2.提交mutation，调用mutation函数this.$store.commit('changeCount', num)}},computed: {...mapState(['count', 'title'])},components: {Son1,Son2}
}
</script><style></style>

1.3.3. index.js

// 存放的是vuex相关的核心代码
import Vue from 'vue'
import Vuex from 'vuex'// 配置插件给Vue使用
Vue.use(Vuex)// 创建仓库（空仓库）
const store = new Vuex.Store({// 严格模式（有利于初学者，检测不规范的代码 => 上线的时候可以去掉）strict: true,// 1. 通过 state提供数据（所有组件可以共享）state: {title: '大标题',count: 100},// 2. 通过 mutations 可以提供修改数据的方法mutations: {// 所有mutation函数，第一个参数，都是 stateaddCount (state, n) {// 修改数据state.count += n},subCount (state, n) {// 修改数据state.count -= n},changeTitle (state, obj) {state.title = obj.newTitle},changeCount (state, newCount) {state.count = newCount}}
})// 导出给main.js使用
export default store

1.3.4. Son1.vue

<template><div class="box"><h2>{{ $store.state.title }}</h2>从vuex中获取的值：<label>{{ $store.state.count }}</label><br><button @click="handleAdd(1)">值 + 1</button><button @click="handleAdd(5)">值 + 5</button><button @click="handleAdd(10)">值 + 10</button><button @click="handleSub(1)">值 - 1</button><button @click="handleSub(5)">值 - 5</button><button @click="handleSub(10)">值 - 10</button><button @click="changeTitle">改标题</button></div>
</template><script>
export default {name: 'Son1Com',methods: {handleAdd (n) {// 错误代码（vue默认不会监测，监测需要成本）// this.$store.state.count++// console.log(this.$store.state.count)// 应该通过 mutation 核心概念，进行修改仓库数据// 需要提交调用mutationthis.$store.commit('addCount', n)},handleSub (n) {this.$store.commit('subCount', n)},changeTitle () {this.$store.commit('changeTitle', { name: '王哲晓', newTitle: '2024加油，迎接新的开始，新的起点，新的人生' })}}
}
</script><style lang="css" scoped>
.box {border: 3px solid #ccc;width: 400px;padding: 10px;margin: 20px;
}
h2 {margin-top: 10px;
}
</style>

1.3.5. Son2.vue

<template><div class="box"><h2>Son2 子组件</h2>从vuex中获取的值：<label>{{ count }}</label><br><button>值 - 1</button></div></template><script>
import { mapState } from 'vuex'
export default {name: 'Son2Com',computed: {...mapState(['count'])}
}
</script><style lang="css" scoped>
.box {border: 3px solid #ccc;width: 400px;padding: 10px;margin: 20px;
}
h2 {margin-top: 10px;
}
</style>


http://www.ppmy.cn/news/1546428.html

相关文章

【更新中】《硬件架构的艺术》笔记（二）：时钟与复位

【更新中】《硬件架构的艺术》笔记（二）：时钟与复位

本章主要针对ASIC设计给出建议&#xff0c;独立于CAD工具以及工艺&#xff0c;主要针对模块设计和存储器接口。 同步设计 这是对时钟域控制最安全的方法&#xff0c;单个主时钟和单个主置位/复位信号驱动设计中所有时序器件。 避免使用行波计数器 行波计数器&#xff1a;用…
阅读更多...
导航栏小案例

导航栏小案例

实现类似于这样的效果 <!DOCTYPE html> <html><head><meta charset"utf-8"><title>导航栏</title><style>*{margin: 0;padding: 0;}.div1{width: 100%;height: 60px;/* border: 1px solid blue; */background-color:rgb(…
阅读更多...
引入了JUnit框架 却报错找不到：java.lang.ClassNotFoundException

引入了JUnit框架 却报错找不到：java.lang.ClassNotFoundException

完整报错如下&#xff1a; Internal Error occurred. org.junit.platform.commons.JUnitException: TestEngine with ID junit-jupiter failed to discover tests at org.junit.platform.launcher.core.EngineDiscoveryOrchestrator.discoverEngineRoot(EngineDiscoveryOrc…
阅读更多...
工程认证与Spring Boot：计算机课程管理的新探索

工程认证与Spring Boot：计算机课程管理的新探索

摘要 随着信息技术在管理上越来越深入而广泛的应用&#xff0c;管理信息系统的实施在技术上已逐步成熟。本文介绍了基于工程教育认证的计算机课程管理平台的开发全过程。通过分析基于工程教育认证的计算机课程管理平台管理的不足&#xff0c;创建了一个计算机管理基于工程教育认…
阅读更多...
LeetCode 力扣 热题 100道（一）两数之和（C++）

LeetCode 力扣 热题 100道（一）两数之和（C++）

两数之和 给定一个整数数组 nums 和一个整数目标值 target&#xff0c;请你在该数组中找出 和为目标值 target 的那 两个 整数&#xff0c;并返回它们的数组下标。 你可以假设每种输入只会对应一个答案&#xff0c;并且你不能使用两次相同的元素。 你可以按任意顺序返回答案…
阅读更多...
Unity 网格模型及优化

Unity 网格模型及优化

一个模型中可以包含很多网格&#xff0c;一个模型可以由多个网格组成。在Unity3D中一个网格可以由多个子网格&#xff08;Sub-Mesh)组成。 在渲染引擎的时候&#xff0c;每个子网格都要匹配一个材质球来做渲染&#xff0c;实际上一个子网格本身就是一个个普通的模型&#xff0…
阅读更多...
(蓝桥杯C/C++)——搜索

(蓝桥杯C/C++)——搜索

一、回溯法 1.回溯法简介 回溯法一般使用 ** DFS(深度优先搜索) ** 实现&#xff0c;DFS是一种遍历或搜索图、树或图像等数据结构的算法&#xff0c;当然这个图、树未必要存储下来(隐式处理就是回溯法)&#xff0c;常见的是通过某种关系构造出的搜索树&#xff0c;搜索树一般…
阅读更多...
Stable Diffusion：照片转视频插件

Stable Diffusion：照片转视频插件

Stable Diffusion是一款基于人工智能技术开发的作图神器&#xff0c;它支持照片转视频的功能&#xff0c;这通常需要通过安装特定的插件来实现。以下是一些关于Stable Diffusion照片转视频插件的详细信息&#xff1a; 一、插件介绍 AnimateDiff 功能&#xff1a;AnimateDiff是…
阅读更多...
最新文章

Copyright @ 2022~2023