Vuex的mutations和vuex-devtools

vuex-devtools

这是一个浏览器关于vuex的一个插件，安装和使用这里就先不说了，有兴趣的可以上网找找安装的教程。

一、mutations是用来干嘛的？

mutations相当于可以在里面定义方法，通过里面的方法来达到修改state里的状态值。

注：Mutation中的方法必须是同步方法

即Vuex的store状态的更新的唯一方式：提交mutations

mutations主要包括两部分：

字符串的事件类型（type）
一个回调函数（handler），该回调函数的第一个参数就是state。（不管你起的什么名字）

注意：

我们通过提交mutations的方式，而非直接改变store.state.count
这是因为Vuex可以更明确的追踪状态的变化，所以不要直接修改store.state.count的值。

二、使用mutations

在store文件夹下的index.js

import Vue from 'vue'
import Vuex from 'vuex'
//1、安装插件
Vue.use(Vuex)
//2、创建对象,里面会放一下固定的对象
const store = new Vuex.Store({
    
    
    state:{
    
    
        counter:0
    },//这是挂载属性的
    mutations:{
    
      //在里面定义方法
        zenjia(state){
    
    
            state.counter++
        },
        jianshao(state){
    
    
            state.counter--
        }
    },
    actions:{
    
     
    },
    getters:{
    
    
    },
    modules:{
    
        
    }
}) 
//3、导出store对象
export default store

在需要使用的组件中使用，假设这个组件为hhh.vue

<template>
	<div id="app">
        <p>{
   
   {counter}}</p>
        <button @click="zenjia">+1</button>
        <button @click="jianshao">-1</button>
    </div>
</template>

<script>
    export default:{
        name:'App',
        data(){
            return{
                message:"我是APP组件"
            }
        },
        methods:{//在这里去导入使用的mutations方法
            addition(){
                this.$store.commit('zenjia') //commit别忘记了
            },
            subtration(){
                this.$store.commit('jianshao')
            }
        }
    }
</script>

三、使用步骤小结

提取出一个公共的store对象，用于保存在多个组件中共享的状态
将store对象放置在new Vue（全局）对象中，这样可以保证在所有的组件中都可以使用到
在其他组件中使用store对象中保存的状态即可
- 通过this.$store.state.X属性的方法来访问状态
- 通过this.$store.commit(‘mutations中的方法’)来修改状态。

四、mutations里携带参数

在通过mutation更新数据的时候，有可能我们希望携带一些额外的参数--------mutation的载荷（payload）

如果参数不是一个：

我们通常要以对象的形式传递，也就是payload是一个对象，这时候也可以再从对象中取出相关的信息。

传入一个参数或对象

mutations:{
    
    
    incrementcount(state,count){
    
    
        state.counter+=count
    }
    
    //传入一个对象
    addStudent(state,stu){
    
    
        state.student.push(stu)
    }
}

在需要使用的vue组件的method中去调用

<button @click="addCount(5)">
    +5
</button>
<button @click="addstudent">添加学生</button>
//在method中
methods:{
	addCount(count){
		this.$store.commit('incrementCount',count)
	}
	//添加学生
	addstudent(){
		const stu={id:114,name:'mary',age:34}
		this.$store.commit('addStudent',stu)
//这里的stu和count被称为payload负载
}
}

五、mutation提交风格

上面通过commit进行提交是一种普通的方式

vue还提供了另外一种包含type属性对象的风格

addStudent(){
	this.$store.commit({
		type:'changecount',
		count:200
})
}

所以上面代码中mutation的处理方式是将整个commit的对象作为payload使用。这时在store中是这样的

changeCount(state,payload){
    
    
    state.count = payload.count
}

六、mutation的响应规则

我们知道vux的store中的state是响应式的，当state中的数据发生改变时，vue组件会自动更新。

所以我们要遵守一些vuex对应的规则：

提前在store中初始化好所需的属性
当给state中的对象添加新属性时，使用下面的方式：
- 方式一：使用Vue.set(obj,‘新属性’，值)
- 方式二：用新对象给旧对象重新赋值
当要删除state中对象的某个属性时，可以使用Vue.delete(state.X,‘要删除的对象属性’)

在store里面：

const store = new Vuex.Store({
    
    
    state:{
    
    
        counter:0,
        info:{
    
    
            name:'aaa',
            age:20,
            id:12345
        }
    },
    mutations:{
    
      
        //要想更新name,可以这样写
        state.info.name = 'bbb'
        //要想增加新的属性
        state.info['height']=1.90  //这样是做不到响应式的
        //要想响应式的增加，要这样写
    	Vue.set(state.info,'height','1.90')
		//删除的响应式：
		Vue.delete(state.info,'age')
    },
    actions:{
    
     
    },
    getters:{
    
    
    },
    modules:{
    
        
    }
})

七、Vuex–mutations的类型常量

即给mutations里面的方法另起一个别名（这个别名要重新建立一个文件），在使用的时候就使用这个别名即可。这样做的目的是为了减少出错的可能性，也便于维护。

具体的相关内容可以查看官方文档。