vuex的使用，没有详细介绍，只说了基本的使用

vuex的使用

有什么写的不好的评论告诉我，我好修改，

vuex的基本使用，就不介绍了
vuex里面有5大属性
1.state
2.mutations
3.actions
4.getters
5.modules

1.state

state就是存放代码的地方，需要注意的state里面的数据都是响应式，需要满足两个需求
1.提前在store初始化所需的属性
2.当给state中添加新的属性是使用下面方式
要通过vue.set，或一些数组api，push(),pop(),unshift(),shift()…,

2.mutations

mutations注要包括两部分
1.字符串的事件类型：type:addition
2.一个回调函数（handler），
mutations里面函数有两个参数
第一个参数计算state，第二个参数是通过commit提交过来的值，
addition：是在mutations里面的函数名
基本使用

mutations：{
hobby(state,传过来的值){
    //参数一是就是vuex里面的state，
    //参数2就是过来的值，如果是一个对象化，就是，传过来的值.count
	state.count += 传过来的值
}
}

通过methods提交一个函数

<template>
<h2>{{$store.state.counter}}</h2>
<button @click="addition('值')">+</button>
</template>

<script>
     export default {
     methods（）{
        addition（count）{
        //count是传过来的值
        //有两种写法
        
        //可以传参数也可以拿data里面的值
         this.$store.commit('hobby',count)
         
         //也可以这样传参，已一个对象的形式
          this.$store.commit({
          type:hobby //函数名，
          count，//这种是简写，
          })
}
}
     }
</script>

需要有一个注意的点，

this.$store.commit(‘hobby’,count)，//最好不要以字符串的方式来

1.在mutations中，定义了很多事件类型，（也就是其中的方法名称），
2.当我们的项目增大时，vuex管理状态越来越多，需要更新状态情况越来越多，那么意味着，mutaions中的方法越来越多
3.方法过多，使用者需要花费大量的时间去记住这些方法，甚至多个文件间来回切换，查看方法名称，甚至如果不是复制的时候，可能还要出现写错的情况，
4.那要用到Mutations常量类型

第一步

//需要一个js文件
//Mutations-type.js
//里面写上下面的代码

export const INCREMENT = 'increment'

第二步在vuex里面使用

//还需要引入Mutations-type.js文件
import { INCREMENT } from './mutations-type'
state:{
counter:0
}
 mutations: {
        [INCREMENT](state) {
            state.counter++
        },
   }

第三步在vue文件里面提交

<template>
<button @click="addition">提交</button>
</template>
<script>
import {INCREMENT} from './store/mutations-type'
methods: {
 addition(){
        this.$store.commit(INCREMENT)
      },
}
</script>

getters

getters可以理解一个vuex中计算属性，但是需要return出来，getter有两个参数，第一个参数是自己state数据，还要一个参数就是自己的getters里面的函数，

基本使用

<template>
//注意：这里跟vue中computed一样的，如果
<h2>{{$store.getters.moveTo}}</h2>
</template>

vuex里面的getters

state:{
  count:0
}
getters:{
  moveTo(state,getters){
    //第一个参数的使用
	return state.count
   //第二个参数使用是那个到自己getters里面函数，
    return  state.count + getters.moveto
  }
  moveto(state){
  return state.count += 1 
  }
}

如果需要在getters里面传参数，

里面传参不知道getters函数里面添加参数，因为getters接收两个参数，如果实现，需要return一个函数，

.vue文件
<template>
<h2>{{$store.getters.calculation(5)}}</h2>
</template>

vuex里面的getters

getters：{
  calculation(state,getters){
	return function(age){
	console.log(age)//5，age就是传过来的值
	}
}

actions这里面是提交mutations实现异步操作,里面有两个参数，

第一个参数，有state，还有getters，还两个提交的方法，一个commit，dispatch，如果有modules里面的模块，还有会有两个值，rootGetters，rootState，就是就是模块里面的getter和state
第二参数：是传过的值，可以是一个function || value || object ，还有使用promise

.vue文件

<template>
    <button @click="addstudent()">添加</button>
</template>

<script>
methods：{
		addstudent(){
			//注意使用异步提交就不是commit，而是dispatch，
			this.$store.dispatch('AupdateInfo','我是信息')
			
			//还有一个参数方式，可以传一个对象或函数
			this.$store.dispatch('AupdateInfo',{
			   name:'张三'，
			   fun：()=>{
			     console.log('执行完毕')
			   }
			})
		}
}
</script>

vuex文件

state:{
	info:[
	 {name:'小明',age:18},
	 {name:'小红',age:20}，
	 {name:'小白',age:25}
	]
}
mutations:{
	undateInfo(state){
		state.info.push(
		    {name:'小黑',age:14}
		)
	}
}
actions：{
	AupdateInfo(context,payload){
	//在这里面需要做异步操作
	 setTimeout(()=>{
	   context.commit('undateInfo')
	   console.log(payload),//传过的参数 //我是信息
       //如果传过的值是对象，就是直接payload.fun(),如果是一个函数直接就是payload（），就是回调函数
	 },1000)
		
	}
}

actions其实也返回一个promise,

.vue文件
<template>
    <button @click="addstudent()">添加</button>
</template>

<script>
methods：{
		addstudent(){
			//注意使用异步提交就不是commit，而是dispatch，
			this.$store.dispatch('AupdateInfo','我是信息').then（res=>{
			console.log(res)//我是传回来的值
			}）
			
			//还有一个参数方式，可以传一个对象或函数
		}
}
</script>

vuex文件

state:{
	info:[
	 {name:'小明',age:18},
	 {name:'小红',age:20}，
	 {name:'小白',age:25}
	]
}
mutations:{
	undateInfo(state){
		state.info.push(
		    {name:'小黑',age:14}
		)
	}
}
actions：{
	AupdateInfo(context,payload){
	   return new Promise((resolve, reject) => {
	       setTimeout(()=>{
	         context.commit('undateInfo')
	         console.log(payload),//传过的参数 //我是信息
	         resolve('我是传回来的值')
	       },1000)
		})
	}
}

modules简单说就另一个vuex，为什么还有多一个，因为如果在一个vuex里面如果数据和函数就过于庞大了，

vuex的使用

let  NewStorage = {
    state:{},
    mutations:{},
    actions:{},
    getters:{},
}
modules：{
    moduleA:NewStorage 
}
//使用没有什么区别，getters接受的参数不同，gettter，就有三个参数
第一个参数就是自己的state，
第二参数就是自己的getters
第三参数就是rootState，拿到根里面的getters
还有一个区别，就是在模块actions要拿到根里面的值，actions里面第一个参数里面就要有根里面的值