vuex的基本使用（多组件数据共享，namespace命名空间+模块化）
一、基本使用
在src下创建要给store文件夹，文件夹中有index（创建store） 的重要.js以及其它要写的.js文件
1.1State里写什么，如何取用，谁取用。
state里面放数据，如果是组件模板中取用就是
//sum是state中的一个变量名
当前求是：$store.state.sum
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'}),