vuex的基本使用（多组件数据共享，namespace命名空间+模块化）

一、基本使用

在src下创建要给store文件夹，文件夹中有index（创建store） 的重要.js以及其它要写的.js文件

1.1State里写什么，如何取用，谁取用。

state里面放数据，如果是组件模板中取用就是

//sum是state中的一个变量名
<h3>当前求是：$store.state.sum</h3>

1.2actions里写什么，如何取用，谁取用

actions里面放需要操作的行为（也就是函数）然后递送给mutations.，他有两个携带参数，一个是context，一个是传送参数值。

//在vuex中的actions
const  actions   ={
    //自己定义的一个处理对象名
    jia：function(context,value){//有两个参数context(联系上下文)value（值）
          context.commit('JIA',value);//用上下文中的commit函数传送值value给moutations中的JIA对象处理，
    触发对象的简写模式可写成
    jia(){........}
    }
}
const  moutations ={
    JIA:fucntion(state,value){
        state.sum -=value//state 中的名为sum的变量进行减value的值，state再保存这个值。
    }
}


//在组件中的操作

method：{
    方法名1（）{
        this.$store.commit('JIA',2);//直接调用moutations中的JIA，并传参2过去
    }
    方法名2（）{
        this.$store.dispatch('jia',2)//调用actions中的方法传送，并传参2过去
    }
}

1.3moutations里些什么，如何取用，谁取用

注意：mutations中的函数名一般用大写形式来区分。

mutations中放的是处理携带参数的函数，state存储其处理的值。(操作如上代码)

二、vuex里哥Getter

作用：进行对state中变量的加工处理

使用场景：当组件模板中的state中某个变量需要被复杂的逻辑处理事。

const  getters={
    函数名（state）{
        return   //依靠return返回相关state中的变量值
    }
}


//在组件模板中的使用是
$store.getters.state中对应的变量名

三、mapstates，mapGetters数据映射

为了让在组件模板中写state中的数据时可以直接学数据名，而不是$store. state.数据名

要先在组件中引入import {mapState,mapGetters }  from 'vuex

	computed:{
			//靠程序员自己亲自去写计算属性
			/* sum(){
				return this.$store.state.sum
			},
			school(){
				return this.$store.state.school
			},
			subject(){
				return this.$store.state.subject
			}, */

			//借助mapState生成计算属性，从state中读取数据。（对象写法）
			// ...mapState({he:'sum',xuexiao:'school',xueke:'subject'}),

			//借助mapState生成计算属性，从state中读取数据。（数组写法）  函数名和数值名相同时才可以使用数组写法。
			...mapState(['sum','school','subject']),

			/* ******************************************************************** */

			/* bigSum(){
				return this.$store.getters.bigSum
			}, */

			//借助mapGetters生成计算属性，从getters中读取数据。（对象写法）
			// ...mapGetters({bigSum:'bigSum'})
			
			//借助mapGetters生成计算属性，从getters中读取数据。（数组写法）
			...mapGetters(['bigSum'])

		},

四、mapMutations和mapAcrtions

让methods中书写，不需要重复重复的书写函数，然后函数中再写$store.commit.('函数名'，value) 

而是可以如下：另外还需要注意的是：使用map映射的方法时，函数默认传送参数是事件参数，若需要携带参数，则需要在组件的模板中，给函数后加小括号在括号内传参。

methods: {
			//程序员亲自写方法
			/* increment(){
				this.$store.commit('JIA',this.n)
			},
			decrement(){
				this.$store.commit('JIAN',this.n)
			}, */

			//借助mapMutations生成对应的方法，方法中会调用commit去联系mutations(对象写法)
			...mapMutations({increment:'JIA',decrement:'JIAN'}),

			//借助mapMutations生成对应的方法，方法中会调用commit去联系mutations(数组写法)
			// ...mapMutations(['JIA','JIAN']),

			/* ************************************************* */

			//程序员亲自写方法
			/* incrementOdd(){
				this.$store.dispatch('jiaOdd',this.n)
			},
			incrementWait(){
				this.$store.dispatch('jiaWait',this.n)
			}, */

			//借助mapActions生成对应的方法，方法中会调用dispatch去联系actions(对象写法)
			...mapActions({incrementOdd:'jiaOdd',incrementWait:'jiaWait'})

			//借助mapActions生成对应的方法，方法中会调用dispatch去联系actions(数组写法)
			// ...mapActions(['jiaOdd','jiaWait'])
		},

五、模块化和命名空间namspace

目的：让代码更好维护，让多种数据分类更加明确。

我们为了更好让数据分类更为明确，把处理同一类数据的vuex的js放块。并又store统一收纳。

const countAbout = {  //计算数据模块
  namespaced:true,//开启命名空间  默认是false
  state:{x:1},
  mutations: { ... },
  actions: { ... },
  getters: {
    bigSum(state){
       return state.sum * 10
    }
  }
}

const personAbout = {//计算人的模块
  namespaced:true,//开启命名空间
  state:{ ... },
  mutations: { ... },
  actions: { ... }
}

const store = new Vuex.Store({
  modules: {
    countAbout,
    personAbout
  }
})

5.1开启命名空间后，组件中读取state数据：

//方式一：自己直接读取
this.$store.state.personAbout.list
//方式二：借助mapState读取：
...mapState('countAbout',['sum','school','subject']), // （模块名，[数据名]）

5.2开启命名空间后，组件中读取getters数据：

//方式一：自己直接读取
this.$store.getters['personAbout/firstPersonName']  //[模块名/方法名]
//方式二：借助mapGetters读取：
...mapGetters('countAbout',['bigSum'])

 5.3开启命名空间后，组件中调用dispatch

//方式一：自己直接dispatch
this.$store.dispatch('personAbout/addPersonWang',person)
//方式二：借助mapActions：
...mapActions('countAbout',{incrementOdd:'jiaOdd',incrementWait:'jiaWait'})

 5.4开启命名空间后，组件中调用commit

//方式一：自己直接commit
this.$store.commit('personAbout/ADD_PERSON',person)
//方式二：借助mapMutations：
...mapMutations('countAbout',{increment:'JIA',decrement:'JIAN'}),