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

}

})

```

Vue

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。