vuex的基础使用以及四个map方法和xuex模块化和命名空间总结

上一篇简单的和大家介绍了关于，在本篇我会给大家介绍一下关于vue中关于vuex的部分基本上已经说玩了，如果后续vue可能存在版本更替技术迭代等等的事情，后面我也是会继续和大家分享关于我掌握的这部分技术。开始我们本篇的总结，在我看来感觉上vuex就是把平时在写vue项目中的script标签的大部分代码给提了出去，当然不只是提了出去还把他共享了出去。

本来呢是这样的


现在呢是这样的
 

下面我就和大家讲讲这就vuex的主要的内容如：
### 搭建vuex环境

1. 创建文件：```src/store/index.js```

   ```js
   //引入Vue核心库
   import Vue from 'vue'
   //引入Vuex
   import Vuex from 'vuex'
   //应用Vuex插件
   Vue.use(Vuex)
   
   //准备actions对象——响应组件中用户的动作
   const actions = {}
   //准备mutations对象——修改state中的数据
   const mutations = {}
   //准备state对象——保存具体的数据
   const state = {}
   
   //创建并暴露store
   export default new Vuex.Store({
       actions,
       mutations,
       state
   })
   ```

2. 在```main.js```中创建vm时传入```store```配置项

   ```js
   ......
   //引入store
   import store from './store'
   ......
   
   //创建vm
   new Vue({
       el:'#app',
       render: h => h(App),
       store
   })
   ```
### 四个map方法
mapActions 方法生成关于actions文件中的数据

mapMutations 方法生成关于mutations文件中的数据

mapState 方法生成关于state文件中的数据

mapGetters 方法生成关于 getters 文件中的数据 

主要当不使用mapGetters方法操作getters的时候 想触发里面的东西需要在路径中加 ` / ` 例如： `return this.$store.getters['personAbout/firstPersonName']`而其它就是`return this.$store.state.xxx`

### xuex模块化和命名空间
：需要在每个模块的配置中添加`namespaced:true,`

```js
//求和相关的配置
export default {
    namespaced:true,
    actions:{
        ·····
    },
    mutations:{
        ·····
    },
    state:{
        ·····
    },
    getters:{
                ·····
    },
}
```
引入的时候添加一个 `modules`模块  在其它组件获取时候

第一种方式 ：`this.$store.state.personAbout.personList`

第二中方式 ： `...mapState('personAbout',['personList']),`
```js
以及在index人口引入
//该文件用于创建Vuex中最为核心的store
import Vue from 'vue'
//引入Vuex
import Vuex from 'vuex'
import countOptions from './count'
import personOptions from './person'
//应用Vuex插件
Vue.use(Vuex)

//创建并暴露store
export default new Vuex.Store({
    modules:{
        countAbout:countOptions,
        personAbout:personOptions
    }
})
```