初识——vuex

╰半夏微凉° 2021-12-19 00:59 237阅读 0赞

在main.js中引用vuex

import Vuex  from “vuex”
    vue.use(Vuex)
    const  store = new Vuex.Store({
    })//Store首字母大写

store中有四个属性： `state 、getters、mutations、actions、modules；`  
**state**  
存放需要管理的数据。  
格式为：

state:{
    data1:"",
    data2:[],
    data3:{}
    }

在组件中使用数据需要这个样子：

this.$store.state.data1.....

**getter**:据说可以当成计算属性computed去理解！！！！！  
不过其中的其中的计算函数要用到state的数据时，需要传参。  
格式为：

getters:{
    	fn(state){   state.data1.   todo....},
    	}

在组件中使用格式为

this.$store.getters.fn //就可以拿到main.js中的计算属性了。

**mutations**据说这各可以当成方法methods来理解。  
使用格式为

mutations: {
    	fn2(state, payload){  
    	state.data2.
    	todo ....
    	 }//state为上面公用的数据。payload为自定义参数。是引用改方法时需要传的参数。
    }

在组件中使用格式：

this.$store.commit("fn2",222)//其中“fn2”为main.js定义的mutations方法名。222是方法中对应的参数payload。

**actions**这个有点不厉害。可以理解为，mutations的下级。想要想state禀告一点事情，必须通过mutations，不然不行，也就是调用mutations中的方法。  
使用格式：

actions:{
    	fn21(context,payload){
    		context.commit(fn2, payload)
    	}//看见没？完全就是调用mutations的函数。和在组件中调用mutations的函数一样，就是把 this.$store变成了context。
    	//气人不？要他干啥？传话筒！！！它的作用就是传话筒，用来处理异步函数，mutations要和state上下一心，不能处理异步。
    }

组件中的使用方法：

//使用actions方法：
    this.$store.dispatch("fn21",payload);
    //使用mutations方法：
    this.$store.commit("fn2",payload);

**小结：**

在组件中使用所有的属性都要**以this.$store开头。**
    	使用state中的数据都需要引用state；不管是在组件还是main.js中，都需要。
    	在组件中使用getters方法 this.$store.getters.
    	使用mutations的方法用：commit---this.$store.commit() 
    		  在actions中调用也是使用commit---context.commit()   
    	使用actions的方法用：dispatch----this.$store.dispatch()

**趣味总结：  
state相当于皇帝：  
getters相当于史官：  
mutations相当于在朝大臣：  
actions相当于小县官：  
modules相当于各个部门。  
史官自动的改写皇帝的记录，  
在朝大臣则通知皇帝改写数据，  
小县官只能通过在朝大臣来通知皇帝改数据，  
数据太多，有点乱，所以就分出来各个部分来分化数据了**

最后一个**modules:**  
模块儿：当数据较多是，都放到state里面会比较繁杂，故而来个modules来分崩离析一下。  
用法：

let   moduleA={
    		state:{   }，
    		getters: {  },
    		mutations:{   },
    		actions:{  }
    }
    let   moduleB={
    		state:{   }，
    		getters: {  },
    		mutations:{   },
    		actions:{  }
    }
    
    const store = new Vuex.Store({
      modules: {
        a: moduleA,
        b: moduleB
      }
    })

在组件中的使用格式为\*\*：哈哈还没有完全的搞清楚。。。。\*\*

## 等我搞清楚，搞明白了，再来写！ ##

搞明白了，传送门[再识vuex–modules][vuex_modules]

[vuex_modules]: https://blog.csdn.net/wangxiaoxiaosen/article/details/94444051