【Vuex深入以及模块化编码】
Vuex深入以及模块化编码
-
- 基础实例
- 四个map方法
-
- mapState
- mapGetters
- mapActions
- mapMutations
- 模块化+命名空间：
- 总结
本篇文章主要重点介绍在学习Vuex基础之后的更深一层次的内容，如果还没掌握基础的，可以先去看一下【Vuex基础详解】
首先，我们从一个案例出发，之后引出后面要谈论的store中的getters，以及Vuex使用中四个map方法的使用以及Vuex的模块化+命名空间
之前一篇文章只介绍了单组件怎么使用Vuex，本文中将结合多组件使用Vuex以及多组件共享Vuex数据以及同步行为
基础实例
Test1.vue:
<template> <div> <h1>当前的数值为：{{num}}</h1><hr> <h2>当前值*5为：{{enlarge}}</h2> <button @click="increment">+</button> <button @click="decrement">-</button> </div></template><script>export default { name:'CountA', methods:{ // 把行为通过dispatch传递到Vuex中 increment(){ this.$store.dispatch('increment', this.num) }, decrement(){ this.$store.dispatch('decrement',this.num) } }, computed:{ enlarge(){ //利用Vuex中的getters获取到值 return this.$store.getters.enlarge }, // 使用计算属性读取到Vuex中的数据 num(){ return this.$store.state.num; }, },}</script><style scoped></style>test2.vue:
<template> <div> <h1>电影列表</h1> <h2>添加喜欢的歌曲</h2> <input type="text" v-model="name" placeholder="请输入歌曲名字"><button @click="addMusic">添加</button> <h4>歌曲展示区</h4> <ul v-for="m,index in musics" :key="index"> <li>{{m}}</li> </ul> </div></template><script>export default { name:'PersonA', data(){ return{ name:'', } }, methods:{ //同样，把行为传递给VuexaddMusic(){ this.$store.dispatch('addMusic', this.name) this.name = ''} }, //同样的方法，用计算属性加工读取state中对应的值 computed:{ musics(){ return this.$store.state.musics; } }}</script><style></style>src/store/index.js:
//该文件用于创建Vuex中最核心的storeimport Vue from 'vue'//引入Vueximport Vuex from 'vuex'//使用vuexVue.use(Vuex);const actions = { increment(context, value){ //把行为传递给Mutations context.commit('INCREMENT', value); }, decrement(context, value){ //把行为传递给Mutations context.commit('DECREMENT', value); }, // 简单逻辑业务 addMusic(context, value){ if(value !== ''){ context.commit('ADDMUSIC', value) } }}const mutations ={ //操作数据，实际上的响应行为 INCREMENT(state){ state.num += 1; }, DECREMENT(state){ state.num -= 1; }, ADDMUSIC(state,value){ state.musics.push(value); }}const state = { num:0, //count组件需要的数据 musics:['孤勇者', '阴天快乐', '单车', '红玫瑰', '稻香', '晴天'], //persons组件需要的数据}//利用getters方法获取值const getters = { enlarge(state){ return state.num * 5 }}//创建并暴露storeexport default new Vuex.Store({ actions, mutations, state, getters})效果图如下：
上述代码中，我们在Vuex的基础使用上增加了用store的getters来读取放大5倍后的数值，虽然这个操作在计算属性中就可以完成，但在实际开发中当我们用到Vuex的时候，state中的数据需要经过加工后再使用时，可以使用getters加工
用到getters的部分：
src/store/index.js：
//利用getters方法获取值const getters = { enlarge(state){ return state.num * 5 }}//创建并暴露storeexport default new Vuex.Store({ ...... getters})组件中读取数据：
两种方式：要么直接用插值语法，要么用计算属性返回，看自己选择
方式一：
<h1>getters加工后的值为：{{$store.getters.enlarge}}</h1>方式二：
<h1>getters加工后的值为{{enlarge}}</h1>............<script>...copmputed:{ enlarge(){ //利用Vuex中的getters获取到值 return this.$store.getters.enlarge }}...</script>接下来将详细介绍4个map方法的使用
四个map方法
mapState
mapState方法： 用于帮助我们映射State中的数据为计算属性，简单理解来说就是用到Vuex中数据的时候，我们用计算属性加工的动作都可用此方法精简
...computed:{ //借助mapState生成计算属性(对象写法) ...mapState({key:'value',...}) //借助mapState生成计算属性(数组写法，前提是组件中使用的计算属性命名和store中方法的命名一致) ...mapState(['name',....])}...mapGetters
mapGetters方法：用于帮助我们映射getters中的数据为计算属性，原理和mapState一样
...computed:{ //借助mapGetters生成计算属性（对象写法） ...mapGetters({key:'value',....}) //(数组写法，前提同上) ...mapGetters(['name',.....])}...mapActions
mapActions方法：用于帮助我们生成与Actions对话的方法，即this.$store.dispatch(...).
methods:{ //借助mapActions生成对应方法(对象写法) ...mapActions({key:'value',.....}) //（数组写法，前提同上） ...mapActions(['name',......])}mapMutations
mapMutations方法：用于帮助我们生成与Mutations对话的方法，即this.$store.commit(...).
methods:{ //借助mapMutations生成对应方法(对象写法) ...mapMutations({key:'value',.....}) //（数组写法，前提同上） ...mapMutations(['name',......])}以上四个方法，作用都是在我们使用Vuex时帮助我们简化代码，在实际开发过程中，能有效提高我们的工作效率
值得注意的点是：
1.使用到哪个方法，就必须先引入对应方法：
import {mapGetters, mapState, mapActions, mapMutations} from 'vuex’2.虽然有每个方法都有两种写法（对象，数组），但在使用数组写法时，需保持组件中computed或methods中的方法命名要和store中对应方法的名字一致，否则就会报错
3.在使用mapsActions和mapMutations时，如果需要传递参数，则要模板绑定方法时就要传入对应参数，否则参数默认为事件对象.。
页面中效果：
完整代码如下：
test1.vue:
<template> <div> <h1>当前的数值为：{{num}}</h1><hr> <h2>当前值*5为：{{enlarge}}</h2> <button @click="increment">+</button> <button @click="decrement">-</button> </div></template><script>import {mapGetters, mapState, mapActions, mapMutations} from 'vuex'export default { name:'CountA', methods:{ // 把行为通过dispatch传递到Vuex中 // increment(){ // this.$store.dispatch('increment', this.num) // }, //使用mapActions简写 ...mapActions({increment:'increment'}), // decrement(){ // this.$store.dispatch('decrement',this.num) // } //使用mapMutation简写，这里直接访问Mutations是因为本行为并不包含逻辑处理和请求那些，可选择直接跳过Actions ...mapMutations({decrement:'DECREMENT'}) }, computed:{ ...mapGetters({enlarge:'enlarge'}), // enlarge(){ // //利用Vuex中的getters获取到值 // return this.$store.getters.enlarge // }, //使用mapState读取 ...mapState({num:'num'}) },}</script><style scoped></style>test2.vue:
<template> <div> <h1>电影列表</h1> <h2>添加喜欢的歌曲</h2> <input type="text" v-model="name" placeholder="请输入歌曲名字"><button @click="addMusic(name)">添加</button> <h4>歌曲展示区</h4> <ul v-for="m,index in musics" :key="index"> <li>{{m}}</li> </ul> </div></template><script>import {mapActions, mapState} from 'vuex'export default { name:'PersonA', data(){ return{ name:'', } }, methods:{ //同样，把行为传递给Vuex // addMusic(){ // this.$store.dispatch('addMusic', this.name) // }, //使用mapActions ...mapActions({addMusic:'addMusic'}) }, //同样的方法，用计算属性加工读取state中对应的值 computed:{ //使用mapState读取 // musics(){ // return this.$store.state.musics; // } ...mapState({musics:'musics'}) }}</script><style></style>src/store/index.js:
//该文件用于创建Vuex中最核心的storeimport Vue from 'vue'//引入Vueximport Vuex from 'vuex'//使用vuexVue.use(Vuex);const actions = { increment(context, value){ //把行为传递给Mutations context.commit('INCREMENT', value); }, decrement(context, value){ //把行为传递给Mutations context.commit('DECREMENT', value); }, // 简单逻辑业务 addMusic(context, value){ if(value !== ''){ context.commit('ADDMUSIC', value) }else{ alert('输入的名字不能为空'); } }}const mutations ={ //操作数据，实际上的响应行为 INCREMENT(state){ state.num += 1; }, DECREMENT(state){ state.num -= 1; }, ADDMUSIC(state,value){ state.musics.push(value); }}const state = { num:0, //count组件需要的数据 musics:['孤勇者', '阴天快乐', '单车', '红玫瑰', '稻香', '晴天'], //persons组件需要的数据}//利用getters方法获取值const getters = { //加工state中的数据 enlarge(state){ return state.num * 5 }, //读取state中的数据 num(state){ return state.num; },}//创建并暴露storeexport default new Vuex.Store({ actions, mutations, state, getters})以上就是map相关4个方法的简单使用
模块化+命名空间：
在以后的开发场景中，我们对于Vuex的使用肯定会比较频繁，随之对应的组件一多，对Vuex的访问以及行为动作会变得越来越多，如果不做处理和规划，则会造成代码冗余量高，且不便维护的问题，所以就可以使用模块化编码，提高代码可读性和可维护性。
修改src/store/index.js文件：
....//把test1.vue中需要用到的操作从新规划,把对应的操作再归类const test1 = { namespaced:true, //首先开启命名空间，否则无法找对应位置 state:{.....}, mutations{....}, actions:{.....}. getters:{.....}};const test2 = { namespaced:true, //首先开启命名空间，否则无法找对应位置 state:{.....}, mutations{....}, actions:{.....}. getters:{.....}}....//创建并暴露Storeexport default new Vuex.Store({ modules:{ test1:'test1', test2:'test2', }})此时组件中调用store中对应方法：
//这里采用数组方式传参，所以与之对应的方法名必须一致//读取state数据...mapState('test1',['num',......])//读取getters中的数据...mapGettrts('test1',['enlarge',.....])//调用dispatch()...mapActions('test1',{increment:'increment',.....})//调用commit()...mapMutations('test1',{decremet:'DECREMENT'})总结
以上就是我对Vuex中map相关方法以及模块化编码的理解，在写完这些笔记之后，觉得自己对Vuex相关的知识又更加巩固了，哈哈哈，记得点赞收藏加关注哟！！！！
