vueX使用说明

一、安装配置vueX

(1) 安装

npm install vuex --save

(2) 在main.js中对vueX进行配置

import Vue from 'vue'
import App from './App'
import store from './store'//引入store
import router from './router'

import { i18n } from './utils/i18n'

Vue.config.productionTip = false

Vue.use(ElementUI);
/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  store,//将store暴露出去
  i18n,
  render: h => h(App)
})

(2) store.js文件的基本结构（普通方式）

import Vue from 'vue'
import Vuex from './vuex'
Vue.use(Vuex);
export default new Vue.Store({
state:{},//用于存储数据，相当于vue组件中的data
getters:{},//对state中的数据进行二次处理，相当于vue中的过滤器filter,在getters中调用state里面的数据时直接用state.属性名 的方式
mutations:{},//对数据进行计算的方法，相当于vue中的computed。调用里面定义的方法：this.$store.commit('mutationName',参数)
actions:{}//处理mutations中已经定义的方法，其直接触发方式是this.$store.dispach(actionName)
})
//modules:{}模块化vuex

分模块：

import Vue from 'vue'
import Vuex from './vuex'
Vue.use(Vuex);
export default new Vue.Store({
modules:{
	login,
	app,
	user
}//模块化vuex

二、vueX各模块介绍

1.state

在任意组件中获取state中数据的方法:

this.$store.state.XXX;
this,$store.getters.xxx

2.getters的使用

代码如下（示例）：

state:{
	count:10,
	id:1
},
getters:{
	counts:state => state.count +10 ;//es6语法
	counts:function(state){//es5语法
		return state.count+10
	}

es6箭头函数：
1、当只有一个参数时 counts:state => state.count +10 ;
2、当没有参数时： counts:() => state.count +10 ;
3、当有多个参数时：counts:(参数1,参数2 ,.....参数n) => state.count +10 ;

3.mutations的使用

代码如下（示例）：

state:{
	count:10,
	id:1
},
getters:{
	counts:state => state.count +10 ;//es6语法
	counts:function(state){//es5语法
		return state.count+10
	},
mutations:{
	SET_COUNT(state,value){
		state.count=value
	}
},
//更改state中的值时必须通过此方法，mutations和getters的区别：getters是将state中的值取过来进行计算后赋给别的变量，mutations是直接修改state的值
//调用mutations中的方法：this.$store.commit.方法名

//在任意组件中调用SET_COUNT方法
this.$store.commit('SET_COUNT',30)//此时，state中的count值为30

4.actions的使用

action的功能和mutation是类似的，都是去变更store里的state，不过action和mutation有两点不同：
（1）action主要处理的是异步的操作，mutation必须同步执行，而action就不受这样的限制，也就是说action中我们既可以处理同步（视觉触发Action、Action再触发Mutation），也可以处理异步的操作；
（2）action改变状态，最后是通过提交mutation this.$store.dispatch(actionName)；
（3）角色定位基于流程顺序，二者扮演的角色不同：
Mutation：专注于修改State，理论上是修改State的唯一途径；
Action：业务代理，异步请求

代码如下（示例）：

state:{
	count:10,
	id:1
},
getters:{
	counts:state => state.count +10 ;//es6语法
	counts:function(state){//es5语法
		return state.count+10
	},
mutations:{
	SET_COUNT(state,value){
		state.count=value
	}
},
actions:{
	setMenu(comtent,data){
		comtent.commit('SET_COUNT')
	}


//在任意组件中调用setMenu方法
this.$store.dispatch('setMenu')//执行过程：通过action触发setMenu函数，再通过setMenu函数触发mutations中的SET_COUNT函数

//actions语法：
//actions{
	//setMenuStates(content,data)第一个参数指向的是state、getters、commit，所以第一个参数也可以是一个对象{state,getters,commit}；第二个参数是调用setMenuStates方法时传进来的自定义参数
//}