Vuex

一.什么是Vuex：
简单的说，Vuex就是一个状态管理器，管理的是全局的状态数据，它可以被所有组件所调用的。所以，当我们需要在多个组件上使用同一组数据时，Vuex会起到很关键的作用。
二.Vuex的组成：

若这个js文件叫shoppingCart.js，后面会用到

1.state：存放数据的地方，只是存放数据

const state={
	products=[
		{id:1,name:"汽车",price:299999}
	]
}

2.getters：读取state数据的地方，类似于组件中的computed，起计算的作用

const getters={
	getProducts(){
		return state.products
	}
}

3.mutations:用于修改state内部数据值的地方，建议只做修改，不要进行逻辑处理，是同步处理

const mutstions={
	addProducts(state,payload){//向products数组中添加一个payload对象数据
		state.products.push(payload)
	}
}
注：修改vuex中state数据，只能在mutations中修改，不能在组件或路由中直接修改，可提交到vuex的action中进行修改。

4.actions：处理业务逻辑，提交mutations

为什么有了mutations修改state里的数据，我们还需要actions呢？不是多此一举吗？答案是我们必须分为两步来做，因为mutations中的提交为同步提交，虽然说我们可以在mutations中添加逻辑，来直接修改state数据，但若我们某个地方的数据发生错误，我们无法找到是在哪里发生的错误，着就会造成很大的麻烦。而actions位异步处理，返回的是一个promise对象，能通过debug去记录VUEX任何修改数据的函数。所以最好分开来调用。

const actions={
	addPro({commit},payload){
		const pro=state.products.find(el=>el.id===payload.id)//查询products中是否已存在该产品
		if(!pro){
			commit('addProducts',payload)
			retuen 0//表示添加成功	
		}else{
			return -1//表示商品已存在
		}
	}
}
注：在组件中调用actions中的方法：this.$store.dispacth(‘shoppingCart/addProducts’,this.products)

5.导出该js文件

export default{
	namespaced:"true",//设置命名空间为true,默认为false,可将该js中的变量锁定在该文件中，如查询shoppingCart文件中的state：this.$store.state.shoppingCart.products
	state,
	getters,
	mutations,
	actions
}

6.modules:用于将多个导出文件合并成一个store：

import Vue from 'vue'
import Vuex from 'vuex' 
import login from './modules/login'
import register from './modules/register'
import products from './modules/products'
import shoppingCart from './modules/shoppingCart'

Vue.use(Vuex)


export default new Vuex.Store({
    modules:{
        login,
        register,
        products,
        shoppingCart
    }
})

将modules中的js文件导入index.js中，合并成一个store