Vuex -mutations 传参修改仓库数据

文章目录

mutations 修改仓库数据
- 一、mutations的基本修改
- 二、mutations 传参修改数据
- - - - 1、在触发事件的时候传递参数
      - 2、提供事件方法，接收使用参数
      - 3、mutations方法接受使用参数
      - 传递参数注意事项：
- 三、综合代码（练习、复习）
- - - - store文件夹中的index.js文件代码
      - App.vue 组件代码：
      - Son1.vue 组件代码
      - Son2.vue 组件代码

mutations 修改仓库数据

我们的vuex是单项数据流，组件内不能直接更改仓库的数据。(需要申请)

通过 strict： true 开启严格模式（提示错误的修改仓库的数据）

一、mutations的基本修改

组件想要修改仓库数据，必须得使用mutations方法

  // 1.通过 mutations提供可以修改仓库数据的方法，里面方法的第一个参数是storemutations: {addCount (store) {store.count += 1},addFive (store) {store.count += 5},changeTitle (store) {store.title = '小标题'}

修改数据，向仓库中的mutations申请调用里面封装的方法

2、事件触发调用对应的方法methods: {handleAdd () {this.$store.commit('addCount')},handleAddFive () {this.$store.commit('addFive')},handleFn () {this.$store.commit('changeTitle')}}

二、mutations 传参修改数据

由于上面的每一次改变数据都得提供一个方法，这样太繁琐，没必要

我们可以直接使用传参（提交载荷）的方式进行高效的处理

1、在触发事件的时候传递参数

    <button @click="handleAdd(1)">值 + 1</button><button @click="handleAdd(5)">值 + 5</button><button @click="handleAdd(10)">值 + 10</button>

2、提供事件方法，接收使用参数

  methods: {handleAdd (n) {this.$store.commit('addCount', n)},

3、mutations方法接受使用参数

  mutations: {addCount (store, number) {store.count += number},

传递参数注意事项：

mutations有且仅有一个参数，如果需要传递多个参数，必须得传递对象过去，同样的那边也得使用对象的形式处理数据。

组件传递参数：

  methods: {handleAdd (n) {this.$store.commit('addCount', {// 注意： 需要传递多个参数，得使用对象的方式count: n,msg: '哈哈'})

仓库修改数据：

  mutations: {// 同样的，组件传递对象过来，这里也是用对象接收使用addCount (store, obj) {store.count += obj.countalert(obj.msg)},

三、综合代码（练习、复习）

store文件夹中的index.js文件代码

// 这里面存放的是 vuex 相关的核心代码
import Vue from 'vue'
import Vuex from 'vuex'//  1、插件安装（注册）
Vue.use(Vuex)// 2、创建仓库(空的) (和路由不一样的就是 需要在的是Veux构造函数上面的Store构造函数)
const store = new Vuex.Store({// 开启严格模式(上线需要关闭)strict: true,// 1.通过state 可以提供 仓库 数据 （所有组件共享的数据）state: {title: '仓库大标题',count: 100},// 2.通过 mutations提供可以修改仓库数据的方法mutations: {// 同样的，组件传递对象过来，这里也是用对象接收使用// Son1组件 添加addCount (store, obj) {store.count += obj.countalert(obj.msg)},// Son1组件 按钮改标题changeTitle (store, newTitle) {store.title = newTitle},// Son2组件 删除delCount (store, obj) {store.count -= obj.countalert(obj.msg)},// Son2组件 按钮修改标题changeTitle2 (store, newTitle2) {store.title = newTitle2},// App.vue组件通过输入框修改 count 值countChange (store, changeCount) {store.count = changeCount}}
})// 3、导出给 main.js 使用
export default store

App.vue 组件代码：

<template><div id="app"><h1>根组件- {{ title }}- {{ count }}</h1><input class="input" :value="count" @input="inputChange" type="text"><Son1></Son1><hr><Son2></Son2></div>
</template><script>
import Son1 from './components/Son1.vue'
import Son2 from './components/Son2.vue'
// 将仓库里面的数据导入过来，下面通过 computed 配置 结构 mapState （方便组件直接使用）
import { mapState } from 'vuex'export default {name: 'app',data () {return {}},// 输入框触发回车事件，修改 发起申请，将仓库里面的 count 的值改掉methods: {inputChange (e) {this.$store.commit('countChange', +e.target.value)// 输入后2秒后自动清空输入框setTimeout(() => {document.querySelector('.input').value = ''}, 2000)}},created () {// console.log(this.$router)   没配undefinedconsole.log(this.$store)console.log(this.$store.state.count)},computed: {...mapState(['count', 'title'])},components: {Son1,Son2}
}
</script>

Son1.vue 组件代码

<template><div class="box"><h2>Son1 子组件</h2>从vuex中获取的值: <label>{{ count }}</label><br /><button @click="handleAdd(1)">值 + 1</button><button @click="handleAdd(5)">值 + 5</button><button @click="handleAdd(10)">值 + 10</button><button @click="handleFn()">修改标题</button></div>
</template><script>
import { mapState } from 'vuex'
export default {name: 'Son1Com',computed: {...mapState(['count', 'title'])},// 修改数据，向仓库中的mutations申请调用里面封装的方法methods: {// 向仓库发起申请（调用mutations里面的 addCound方法）  添加handleAdd (n) {this.$store.commit('addCount', {// 注意： 需要传递多个参数，得使用对象的方式count: n,msg: '你确定要添加吗'})},// 向仓库发起申请，（调用mutations里面的 changeTitle方法）  修改标题handleFn () {this.$store.commit('changeTitle', 'vuex')}}
}
</script>

Son2.vue 组件代码

<template><div class="box"><h2>Son2 子组件</h2>从vuex中获取的值:<label>{{ count }}</label><br /><button @click="handleAdd(1)">值 - 1</button><button @click="handleAdd(5)">值 - 5</button><button @click="handleAdd(10)">值 - 10</button><button @click="handleFn">修改标题</button></div>
</template><script>
// 先导入辅助函数
import { mapState } from 'vuex'export default {name: 'Son2Com',computed: {...mapState(['count'])},methods: {handleAdd (n) {// 向仓库申请 （调用mutations 里面的 delCount方法） 删除this.$store.commit('delCount', {count: n,msg: '你确定要删除吗'})},handleFn () {// 向仓库申请 （调用 mutations 里面的 changetitle2方法） 修改标题this.$store.commit('changeTitle2', 'vuex2')}}
}
</script>