Vuex -mutations 传参修改仓库数据

mutations 修改仓库数据

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

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

一、mutations的基本修改

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

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

2. 修改数据，向仓库中的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.count
      alert(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.count
      alert(obj.msg)
    },
    // Son1组件 按钮改标题
    changeTitle (store, newTitle) {
      store.title = newTitle
    },
    // Son2组件 删除
    delCount (store, obj) {
      store.count -= obj.count
      alert(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)   没配undefined
    console.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>