Vuex 状态管理

1、什么是Vuex?
Vuex是Vue.js应用程序的状态管理模式+库。它充当应用程序中所有组件的集中存储，其规则确保状态只能以可预测的方式进行更改。如果是小型项目，你可能觉得这个状态管理对于你来说有点显得多此一举，但是在进行大型项目时，你就会发现这个状态管理是多么的方便。它基于父子、兄弟组件的传值会很方便，如果在两个没有关系的组件之间要传值的话，使用到vuex就很好的解决了我们这个问题，它相当于一个公共仓库，保存着所有组件都能共用的数据。
2、怎么用？
2.1 安装vuex : npm install vuex --save
2.2 初始化
首先需要在项目的src目录下新建一个store文件夹，新建index.js 和state.js

	index.js
	------------------------
	import Vue from 'vue'
	import Vuex from 'vuex'
	import loginfrom './login.js'
	Vue.use(Vuex)
	export default new Vuex.Store({
		 state:{
		    name:'我是index的name'
		  },
		 mutations:{
		    get(state){
		      state.name="我是index修改后的name"
		    }
		  },
	  login
	})
	
	login.js
	-------------------------------
	const state={
	  //保存登录用户的一些信息
		 userInfo:"修改前的info"
	}
		const mutations={
		  getuserInfo(){
		    //执行方法的一些操作
		      state.userInfo="修改后的info"
		  }
		}
		export default{
		  state,
		  mutations
		}
		
		//组件使用的时候
		<template>
			  <view>
			    <text>login页面</text>
			    <view>{{userInfo}}</view>
			    <view>{{name}}</view>
			  </view>
	</template>
			
			<script>
			import {mapState,mapMutations} from 'vuex'
			export default {
			  data(){
			    return{
			      
			    }
			  },
			  onLoad() {
			    console.log('login的onload')
			    //调用导入的方法
			    this.getUserInfo()
			    this.get()  //需要传参的话就在（）写上对应的参数
			  },
			  computed:{
			    ...mapState({
			      //如果state是写在modules的话，需要调用相应的命名空间
			      userInfo:state=>state.login.userInfo,
			      // name:state=>state.name    //没有命名空间的写法1
			    }),
			    //如果没有写在modules里面的话，可以这么写 
			    //没有命名空间的写法2
			    ...mapState(['name'])
			    
			  },
			  methods:{
			    //调用方法没有命名空间的说法，所以直接调用方法名就可以了
			    ...mapMutations(['getUserInfo','get'])
			  }
			};
			</script>

3、vuex的理解
3.1 state:一般是用来保存一些变量数据
3.2 mutations 一般用来触发事件，相当于方法，用户需要触发这个方法，借此来改变state的数据，参数的话，第一个参数一般是state，第二个参数就是用户传入的值
3.3 actions：是间接触发mutations方法的一种’中间商‘，他是可以执行异步操作，避免用户去直接操作state,action提交的是mutation，而不是直接变更状态
PS:通过action来触发mutation方法

const mutations={
  getUserInfo(state){
    //执行方法的一些操作
    state.userInfo="修改后的info"
    console.log('开始执行登录登录操作了')
  },
  add(){
    console.log('add');
  }
}


const actions={
payload是调用方法传入的参数
  increment({commit,state},payload){
    console.log(state)
    console.log(payload)
    commit('add');
  }
}

//使用
methods:{
    ...mapActions(['increment']),
  }

 onLoad() {
    console.log('---action----')
    this.increment('我是参数')
  },