vuex

用来存储组件中需要共享的状态的仓库，基于事件和单利。

1. vuex修改state的流程:

• state:仓库中的数据(饭店的原材料：米之类的)
• actions:用来接收所有从组件发过来的action请求(async)（服务员）
• mutations:用来接收actions和commit,然后修改state的地方(后厨)
• getters:用来获取仓库中的最新的状态的地方(饭端过来吃就行)

2.Vuex的安装配置

• (1).在使用vue-cli脚手架创建项目后 npm install vuex
• (2).进入项目安装vuex,安装完成后，在项目的文件夹src中再新建一个文件夹store,文件夹中新建文件store.js(命名为本人习惯)。
  使用方法：
  ①文件夹目录结构：
  

在这里，我把vuex的actions、getters、mutations分别抽离了出来，index引入这三个文件，types用来做事件名称的管理。
②引用方法

引入store文件夹后，默认寻找index文件，在组件中引用

另一种：
store.js

//引入vue和Vuex
 import Vue from 'vue'
 import Vuex from 'vuex'

 //引入之后，对vuex进行引用
 Vue.use(Vuex)

main.js

import {store} from './store/store'

new Vue({
  store:store,//使用store
  el: '#app',
  router,
  components: { App },
  template: '<App/>',

  })

在main.js 中引入vuex文件,到此为止，vuex的引入就算是成功了。

实例：（num初始值为100，点击增加）

//数据 
state:{
	num:100
},

//接收动作请求(可进行异步操作)
actions:{
	ADD:(store,payload)=>{  //store自带的，必须有，payload可以没有
	 console.log("actions:ADD")
	 store.commit("INC")  //将请求提交给mutation里面的I
},

//处理actions commit过来的请求，根据请求修改state
mutations:{
	INC:(state)=>{  //此处的state是上面数据里面的state
		state.num++
	}
}

//用来获取处理过的状态的
getters:{
	GETNUM:(state)=>{
		return state.num
	}
}



counter.vue文件中：
 computed:{
	...mapGetters({   //...是es6中的写法，意思是展开对象，mapGetters是vuex提供的一个方法，在counter.vue中引入：import {mapGetters} from "vuex"
		n:"GETNUM"  //将GETNUM方法触发赋给n,所以在dom里面直接写{{n}}
	})
}

单一使用Vue.js的场景

在单一使用vue.js的场景中，我们难免要在不同的组件中互相传值。在该场景中，由一个根组件，两个父组件再各自拥有一个子组件，我们如果使用prop的属性传值，在这个详情组件需要使用添加组件中的某个值时，我们需要不停的触发某个事件将这个值一层一层一层一层地沿着这个路径传过去，这样能实现将值传递给详情组件，但这是相当的麻烦（鬼知道我当初不知道vuex为了传值头有多大）。现在让我们看下vuex.js场景下的效果:

使用Vuex.js的场景

3.vuex的应用场景

(1)检测用户是否登录

当在登录组件中处理了登录信息后，存入state仓库中，可在所有的组件中进行用户数据共享，判断是否有权限。

(2)非父子组件值传递

其实父子组件中也是可以使用vuex，主要看业务的复杂度
只要涉及到多组件数据进行共享、传递，都可以选择使用vuex