vuex学习

其实也没啥难度，安装vuex后使用而已

目录

一、通过this.$store.state.属性名操作数据

第一种方式（this.$store.state.属性名）

写法

传参

第二种（...mapStates）

写法

传参

二、使用mutation来操作全局数据（分同步和异步两种）

第一种（this.$store.commit("函数名")

写法（同步）

传参

第二种（...mapMutations(['函数名'])）

写法

第三种（this.$store.dispatch("异步函数名")）

写法（异步）

第四种（...mapActions("异步函数名")）

getter

第一种写法

第二种写法

---

一、通过this.$store.state.属性名操作数据

第一种方式（this.$store.state.属性名）

写法

第一种就是在store/index.js中把数据写在new Vuex.Store(){}中，然后去各个组件中使用this.$store.state.属性名 就行了

//store.js页面(这个其实就是Vuex了)
export default new Vuex.Store{ 
    state:{ count:0 } 
}

在组件页中直接通过this.$store.state.属性名来对全局数据进行修改

//组件页：
<template>
    <button onclick="add">点击加一</button>
</template>
<script>
    import 组件名 from "组件的文件路径";
    export default{
    	data(){
    		return{
    		......
     		}
    	},
     	methods:{
           	add(){
            	    //可以通过this.$store.state.属性名直接操作vuex中的数据
                 		this.$store.state.count++;                   	         
            	}     
      	}
      	,
    	components:{
    		组件名
    	}
    }
</script>

但是，这种是不合法的，因为这样操作vuex中的数据的话很容易造成某个地方能够修改vuex中的数据，但是很难找出来是在哪修改的。

传参

就一堆值，有个der的传参啊，你在想屁吃

第二种（...mapStates）

写法

第二种就是在组件页面中导入vuex时解构出一个mapStates，在script中的computed中使用...mapStates([共享值参数名])

使用方式：

//store.js页面(这个其实就是Vuex了)
export default new Vuex.Store{
    state:{
        count:0    
    }
}

//组件页：
<template>
    <div>{{count}}</div>
</template>
<script>
    import {mapStates} from "vuex";
    export default{
        data(){
        	return{
        	
         	}
        },
        computed:{
        	...mapStates(['count'])//x、y、z均为vuex中的数据
        }
    }
</script>

简单说就是在组件页的计算属性中导入vuex中state中的数据，然后组件页就可以使用了

传参

数据就只是单纯的数据，又不是函数，想什么想传参

---

二、使用mutation来操作全局数据（分同步和异步两种）

直接通过this.$store.states.属性名来对vuex中的全局变量进行控制最不推荐的

vue中比较推荐使用mutation来修改store中的数据

只能使用mutation变更store中的数据，不能使用this.$store.states.属性名 来直接操作store中的数据。

第一种（this.$store.commit("函数名")

写法（同步）

        在store的文件夹中的index.js文件里，有一个mutation属性，在这个mutation属性中可以定义一些方法，将state中的全局属性放在方法中调用，然后在组件页通过this.$store.commit("对应的方法名")

        简单说就是把state整个作为参数传入mutation中定义的方法内，因为是整个传入，也就是说传入的是一个state对象，既然是对象，那就可以直接通过点语法获取其中的值，进而对其操作。

        然后是在组件页 通过this.$store.commit("在mutation中定义的函数名") 来调用

传参

        至于传参进去vuex中进行操作，更简单了

        在mutation中定义的函数，第一个参数就是state对象，第二个参数开始才是传入的参数，例如

        mutation:{ add(state,step){ state.xxx += step; } }

        在上面的例子中，step即为传入的参数

        而在组件页怎么向vuex传入参数呢

        this.$store.commit("add",3)

即，组件页传参给vuex时，第一个参数为函数名，第二个才是想要传入的参数。

第二种（...mapMutations(['函数名'])）

写法

...mapMutations(["store中mutations中的函数名"])

使用方式：

import {mapMutations} from "vuex";
...
methods:{
    ...mapMutations(['remove']);//remove为示例函数名
    //使用的时候，通过其他函数来调用函数内部的mapMutations的函数
    hundle(id){
        this.remove(id)
        //通过hundle函数调用了remove()函数，并且传入了id这个参数 
    }
    
}

---

第三种（this.$store.dispatch("异步函数名")）

写法（异步）

        但是 在mutation中并不能直接使用异步函数，例如使用setTimeout函数延时三秒后将state.count++，这样的话虽然在视图上可以看到count数据变化，但实际上在vue devtools插件中可以看到state中的值并未有过变化。

        为什么一定要在vue-devtools中看的到变化才行？老子也不知道啊，我都没听过原因

        异步函数需要写在store.js的actions中，在actions中的函数中再使用context.commit("函数名")去调用对应的同步函数，在使用异步函数的时候就需要使用这个actions中的函数就行了。

第一种：

//store.js中
export default new.Vuex.Store{
    state:{
        //全局变量:值
        count:0//示例键值对    
    },
    mutations:{
        //这里只能放同步函数，异步函数需要放在下面的actions中  
        //state实际上就是上面的state对象，也就是vuex的全局属性
        add(state){
          state.count++         
        }
    },
    actions:{
        addSync(context){
            //context实际上还是store对象
            context.commit("add")   
            //说到底 不过就是this.$store.commit换了种写法，切  
            //不过说是那么说，真写成this.$store.commit的话又不行               
        } 
    }
}

组件要调用的话

//在组件的对应函数里使用this.$store.dispatch("异步函数名")
methods:{
    //示例函数
    get(可传参数){
        this.$store.dispatch("store.js中的某一个异步函数名",可以在这里传入参数)    
    }    
}

export default new.Vuex.Store{
    state:{
        //全局变量:值
        count:0//示例键值对    
    },
    mutations:{
        //这里只能放同步函数，异步函数需要放在下面的actions中  
        //state实际上就是上面的state对象，也就是vuex的全局属性
        add(state){
          state.count++         
        }
    },
    actions:{
        addSync(context){
            //context实际上还是store对象
            context.commit("add")   
            //说到底 不过就是this.$store.commit换了种写法，切  
            //不过说是那么说，真写成this.$store.commit的话又不行               
        } 
    }
}

第四种（...mapActions("异步函数名")）

没写

---

getter

        getter只是包装出一个跟state一样的对象出来，getter中修改的state值并不会对state中的原数值造成影响，但是，state中的数值改动的话，getter中的值会跟着state的值变化。

        在store的index.js中（麻烦死了，全部简写成vuex得了），写入getters对象

第一种写法

export default{
    state: {
        count:0
    },
    getters:{
        showNum(state){
        	return `当前最新的数量是${state.count}`;
         }
     }
}

第二种写法

        说白了还是上面写过的 ...mapGetters(["getters中的属性名"])，不写了，妈的，浪费老子时间

需要注意的点：

        ...mapGetters(["属性名"])这个还是要写在computed计算属性中的。并且，虽然在getters中我们写的是函数，但是在调用时好像是会自动执行的，自动执行的虽然轻松点，但是这样的话可能就没办法传参了，这点需要注意一下。

        测试了一下，果然不能传值，那就很纳闷了啊，不能传值的话要这个意义不大啊，搞不懂

        哦哦，知道了，他这个只对state里面的数据起到包装作用，跟一开始的state的一样，只有数据而已，只有数据的话没办法传参的。