「这是我参与2022首次更文挑战的第1天，活动详情查看：2022首次更文挑战」。

一：vuex的五大成员有哪些？

1.state:存储全局所有数据的

2.mutation:是修改state里的数据的

3.action:处理异步任务的

4.getter：store里的计算属性，将所有的公共计算属性放在一起，方便复用

5.module:管理子模块的，将所有子模块写在这里面

二：五大成员的使用：

五大成员书写位置：

1.写在这个位置的是全局都可以用的，不是写在模块里的

const store = new Vuex.Store({
   //五大成员都写在这里面
   state:{
      //一般属性
	count:1,
        //对象
        co:{
        name:'lmr',
        age:15,
        add() {
            
        }
	}
   },
   mutations:{
   //必须要传state
   //1.不带参
   add(state) {
        
        state.count++
    }
    //2.不带参数
    addCount(state，payload) {
        数据处理
        state.count=state.count+payload
    }
   
   },
   actions:{
    add(context,payload) {
       异步任务 
    }
   
   },
   getters:{
   计算属性名：{
        
	}
   },
   modules{
   
   }
   
}）

注意点： （1）mutations里的函数必须要传state (2)这里只有state是没有s的哦，其他的都有s

2.写在模块里的（一定要写命名空间，防止多个模块之间命名冲突）

export default{
    //true表示开启命名空间
    namespaced:true
    state:()=>{
        return{
            这里写数据
        }
    },
   mutations{},
   actions:{},
   getters:{},
   modules{}
    
    
}

注意： （1）namespaced:true,true表示开启命名空间,false表示关闭（不写表示关闭） （2）模块里的state是函数，返回一个对象 （3）modults在模块里也可以写，属于模块的嵌套

访问四大成员里的数据：

1.state：

(1)一般写法：

（1）在<template>里写：

$store.state.变量名（this可以省略不写）

（2）在<script>里写：
this.$store.state.变量名

(2)使用辅助函数的写法：

（a）映射state里的数据：

//state的辅助函数中的映射一定要写在计算属性里面
computed：{
    ...mapState(['变量1'，'变量2'...])
}

（b）使用数据：

（1）在<template>里写：
//因为在...mapState(['数据名1'，'数据名2'...])这里已经展开了，所以可以直接用。

<p>姓名：{{数据名}}</p>

（2）在<script>里写：
this.数据名

2.mutation的写法：

(1)一般写法：

（1）在<template>里写：

$store.commit('方法名'，{载荷})

（2）在<script>里写：
this.$store.commit('方法名'，{载荷})

(2)使用辅助函数的写法：

（a）映射mutations里的数据：

methods：{
    ... mapMutations(['方法名'])
}

注意：Mutations的辅助函数中的映射一定要写在methods里面

（b）使用数据：

（1）在<template>里写：
//add是mutations里的方法
 <button @click="add">使用辅助函数触发映射的 add 方法</button>

（2）在<script>里写：
this.方法名({传的参数})
例子：
this.addCount({ num: 5 })

3.action的写法：

(1)一般写法：

（1）在<template>里写：

$store.dispatch('方法名'，{载荷})

（2）在<script>里写：
this.$store.dispatch('方法名'，{载荷})

(2)使用辅助函数的写法：

（a）映射action里的数据：

//action的辅助函数中的映射一定要写在methods里面
methods：{
    ... mapActions(['方法名'])
}

（b）使用数据：

（1）在<template>里写：
//count是action里的方法
 <button @click="count">使用辅助函数触发映射的 count 方法</button>

（2）在<script>里写：
this.方法名({传的参数})
例子：
this.addCount({ num: 5 })

4.getter的写法：

(1)一般写法：

（1）在<template>里写：

$store.getters('方法名'，{载荷})

（2）在<script>里写：
this.$store.getters('方法名'，{载荷})

(2)使用辅助函数的写法：

（a）映射getters里的数据：

//getterS的辅助函数中的映射一定要写在computed里面
computed：{
    ... mapGetter(['方法名'])
}

（b）使用数据：

（1）在<template>里写：
//count是getters里的方法
 <button @click="count">使用辅助函数触发映射的 count 方法</button>
（2）在<script>里写：
this.方法名({传的参数})
例子：
this.addCount({ num: 5 })

总结：

（1）
state和getters的辅助函数要写在 computed对象里，

mutations和actions的辅助函数要写在 methods对象里

（2）访问四大成员数据，除了state直接写变量名，其他的都要用括号包裹（因为其他的都是函数调用）

注意点：辅助函数里只可以用数组来访问全局或者模块里的数据

Module使用步骤：

1.创建一个模块文件

export default {
    state:()=>{
    return {
}
},
mutations:{
},
actions:{
},
getters:{
}
}

2.在写store实例对象的文件里导入子模块

// 导入子模块
import Count from './count'

3.在创建实例处将子模块写在模块对象里

modules:{
    自己起的模块名称：导入的子模块对象
}

4.开启命名空间

5.访问模块里数据（具体访问步骤看下面的四大成员访问方式）

四大成员访问方式：

如果组件需要访问使用模块：

（1）访问state里的数据：

//使用辅助函数访问子模块的数据
...mapState('模块名'，['数据名'])

（2）访问getters里的数据：

...mapGetters('模块名'，['数据名'])

（3）访问Mutations里的方法：

方法1：
$store.commit(模块名/方法名)
方法2：
...mapMutations('模块名'，['方法名'])

（4）访问Actions里的方法：

方法1：
$store.dispatch('模块名'，['方法名'])
方法2：
...mapActions('模块名'，['方法名'])