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

news2024/11/16 3:04:19

目录

一、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 = false

new 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函数，第一个参数，都是 state
    addCount (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 核心概念，进行修改仓库数据
      // 需要提交调用mutation
      this.$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函数，第一个参数，都是 state
    addCount (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 核心概念，进行修改仓库数据
      // 需要提交调用mutation
      this.$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 = false

new 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函数，第一个参数，都是 state
    addCount (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 核心概念，进行修改仓库数据
      // 需要提交调用mutation
      this.$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.coloradmin.cn/o/2241228.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

【MYSQL】锁详解（全局锁、表级锁、行级锁）【快速理解】

【MYSQL】锁详解（全局锁、表级锁、行级锁）【快速理解】

目录 一、全局锁 二、表级锁 1.表锁 2.元数据锁 3.意向锁 三、行级锁 1. 行锁 2.间隙锁 3.临建锁 锁是处理并发情况下&#xff0c;对数据的一致性的关键因素&#xff0c;也是并发情况下对效率影响非常大的。 1、全局锁&#xff1a;锁定表中所有数据。 2、表级锁&#xff1a;…
阅读更多...
客户案例｜智能进化：通过大模型重塑企业智能客服体验

客户案例｜智能进化：通过大模型重塑企业智能客服体验

01 概 述 随着人工智能技术的快速发展&#xff0c;客户对服务体验的期待和需求不断升级。在此背景下&#xff0c;大模型技术的崛起&#xff0c;为智能客服领域带来了创造性的变革。 在上篇文章《在后LLM时代&#xff0c;关于新一代智能体的思考》中有提到&#xff0c;智能客服…
阅读更多...
【Leetcode 中等】34. 在排序数组中查找元素的第一个和最后一个位置

【Leetcode 中等】34. 在排序数组中查找元素的第一个和最后一个位置

原题链接 Leetcode 34. 在排序数组中查找元素的第一个和最后一个位置 题目 给你一个按照非递减顺序排列的整数数组 nums&#xff0c;和一个目标值 target。请你找出给定目标值在数组中的开始位置和结束位置。如果数组中不存在目标值 target&#xff0c;返回 [-1, -1]。 你必…
阅读更多...
直接缓存映射Direct Mapped Cache

直接缓存映射Direct Mapped Cache

这张图展示了**直接映射缓存&#xff08;Direct Mapped Cache&#xff09;**的结构和工作原理&#xff0c;并解释了如何将主存中的块映射到缓存中的特定行&#xff08;组&#xff09;。以下是引用第 0 块和第 8 块时的细节分析&#xff1a; 直接映射缓存的特点 映射规则&…
阅读更多...
基于Java Springboot图书馆管理系统

基于Java Springboot图书馆管理系统

一、作品包含 源码数据库文档全套环境和工具资源部署教程 二、项目技术 前端技术&#xff1a;Html、Css、Js 数据库&#xff1a;MySQL 后端技术&#xff1a;Java、Spring Boot、MyBatis 三、运行环境 开发工具&#xff1a;IDEA/eclipse 数据库&#xff1a;MySQL8.0 数据…
阅读更多...
Python中的HTML

Python中的HTML

文章目录 一. HTML1. html的定义2. html的作用3. 基本结构4. 常用的html标签5. 列表标签① 无序列表② 有序列表 6. 表格标签7. 表单标签8. 表单提交① 表单属性设置② 表单元素属性设置 一. HTML 1. html的定义 HTML 的全称为&#xff1a;HyperText Mark-up Language, 指的是…
阅读更多...
大数据新视界 -- 大数据大厂之 Impala 存储格式转换：从原理到实践，开启大数据性能优化星际之旅（下）（20/30）

大数据新视界 -- 大数据大厂之 Impala 存储格式转换：从原理到实践，开启大数据性能优化星际之旅（下）（20/30）

&#x1f496;&#x1f496;&#x1f496;亲爱的朋友们&#xff0c;热烈欢迎你们来到 青云交的博客&#xff01;能与你们在此邂逅&#xff0c;我满心欢喜&#xff0c;深感无比荣幸。在这个瞬息万变的时代&#xff0c;我们每个人都在苦苦追寻一处能让心灵安然栖息的港湾。而 我的…
阅读更多...
【优选算法 — 滑动窗口】水果成篮 找到字符串中所有字母异位词

【优选算法 — 滑动窗口】水果成篮 找到字符串中所有字母异位词

水果成篮 水果成篮 题目描述 因为只有两个篮子&#xff0c;每个篮子装的水果种类相同&#xff0c;如果从 0 开始摘&#xff0c;则只能摘 0 和 1 两个种类 &#xff1b; 因为当我们在两个果篮都装有水果的情况下&#xff0c;如果再走到下一颗果树&#xff0c;果树的水果种类…
阅读更多...
【ubuntu16.04】机器人学习笔记遇到的问题及解决办法：仿真小海龟

【ubuntu16.04】机器人学习笔记遇到的问题及解决办法：仿真小海龟

18版本的后面会出问题&#xff0c;避免万一我还是用了之前的16版本&#xff0c;虽然还没有解决粘贴的问题&#xff0c;但是安装ros很成功 可参考该文章博主讲的很详细&#xff0c;成功画出海龟 最后要把鼠标停在第三个终端&#xff0c;再去点击键盘&#xff0c;海龟才会动哦
阅读更多...
游戏引擎学习第九天

游戏引擎学习第九天

视频参考:https://www.bilibili.com/video/BV1ouUPYAErK/ 修改之前的方波数据&#xff0c;改播放正弦波 下面主要讲关于浮点数 1. char&#xff08;字符类型&#xff09; 大小&#xff1a;1 字节&#xff08;8 位&#xff09;表示方式&#xff1a;char 存储的是一个字符的 A…
阅读更多...
探索 JNI - Rust 与 Java 互调实战

探索 JNI - Rust 与 Java 互调实战

真正的救赎&#xff0c;并非厮杀后的胜利&#xff0c;而是能在苦难之中&#xff0c;找到生的力量和内心的安宁。 ——加缪Albert Camus 一、Rust Java &#xff1f; Java 和 Rust 是两种现代编程语言&#xff0c;各自具有独特的优势&#xff0c;适用于不同的应用场景。 1、…
阅读更多...
C++11新特性（二）

C++11新特性（二）

目录 一、C11的{} 1.初始化列表 2.initializer_list 二、可变参数模版 1.语法与原理 2.包扩展 3.empalce接口 三、新的类功能 四、lambda 1.语法 2.捕捉列表 3.原理 五、句装器 1.function 2.bind 一、C11的{} 1.初始化列表 C11以后想统⼀初始化⽅式&#xff0…
阅读更多...
生信：TCGA学习（R、RStudio安装与下载、常用语法与常用快捷键）

生信：TCGA学习（R、RStudio安装与下载、常用语法与常用快捷键）

前置环境 macOS系统&#xff0c;已安装homebrew且会相关命令。 近期在整理草稿区&#xff0c;所以放出该贴。 R语言、RStudio、R包安装 R语言安装 brew install rRStudio安装 官网地址&#xff1a;https://posit.co/download/rstudio-desktop/ R包下载 注意R语言环境自带…
阅读更多...
Vue3集成搜索引擎智能提示API

Vue3集成搜索引擎智能提示API

需求&#xff1a; 如何在项目中实现像百度搜索框一样的智能提示效果&#xff0c;如下图所示&#xff1a; 相关知识&#xff1a; 下面是各厂商提供的免费API 厂商请求百度http://suggestion.baidu.com/su?wd中国&cbwindow.baidu.sug必应http://api.bing.com/qsonhs.as…
阅读更多...
大数据技术在智慧医疗中的应用

大数据技术在智慧医疗中的应用

&#x1f493; 博客主页&#xff1a;瑕疵的CSDN主页 &#x1f4dd; Gitee主页&#xff1a;瑕疵的gitee主页 ⏩ 文章专栏&#xff1a;《热点资讯》 大数据技术在智慧医疗中的应用 大数据技术在智慧医疗中的应用 大数据技术在智慧医疗中的应用 引言 大数据技术概述 定义与原理 发…
阅读更多...
游戏引擎学习第10天

游戏引擎学习第10天

视频参考:https://www.bilibili.com/video/BV1LyU3YpEam/ 介绍intel architecture reference manual 地址:https://www.intel.com/content/www/us/en/developer/articles/technical/intel-sdm.html RDTS&#xff08;读取时间戳计数器&#xff09;指令是 x86/x86_64 架构中的…
阅读更多...
「QT」文件类 之 QTemporaryDir 临时目录类

「QT」文件类 之 QTemporaryDir 临时目录类

✨博客主页何曾参静谧的博客&#x1f4cc;文章专栏「QT」QT5程序设计&#x1f4da;全部专栏「Win」Windows程序设计「IDE」集成开发环境「UG/NX」BlockUI集合「C/C」C/C程序设计「DSA」数据结构与算法「UG/NX」NX二次开发「QT」QT5程序设计「File」数据文件格式「UG/NX」NX定制…
阅读更多...
Kettle配置数据源错误“Driver class ‘org.gjt.mm.mysql.Driver‘ could not be found”解决记录

Kettle配置数据源错误“Driver class ‘org.gjt.mm.mysql.Driver‘ could not be found”解决记录

问题描述 错误提示&#xff1a;“Driver class ‘org.gjt.mm.mysql.Driver’ could not be found, make sure the ‘MySQL’ driver (jar file) is installed.” 原因分析&#xff1a; 根据错误提示是缺少了相关的数据源连接jar包。 解决方案&#xff1a; 安装对应的Mysql…
阅读更多...
C++《继承》

C++《继承》

在之前学习学习C类和对象时我们就初步了解到了C当中有三大特性&#xff0c;分别是封装、继承、多态&#xff0c;通过之前的学习我们已经了解了C的封装特性&#xff0c;那么接下来我们将继续学习另外的两大特性&#xff0c;在此将分为两个章节来分别讲解继承和多态。本篇就先来学…
阅读更多...
力扣(LeetCode)283. 移动零(Java)

力扣(LeetCode)283. 移动零(Java)

White graces&#xff1a;个人主页 &#x1f649;专栏推荐:Java入门知识&#x1f649; &#x1f439;今日诗词:雾失楼台&#xff0c;月迷津渡&#x1f439; ⛳️点赞 ☀️收藏⭐️关注&#x1f4ac;卑微小博主&#x1f64f; ⛳️点赞 ☀️收藏⭐️关注&#x1f4ac;卑微小博主…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023