Vuex的模块化编程

1.之前我们使用store引入的时候不够简介,store为我们封装了方法

mapState:从state中获取数据,以数组的方式返回

mapGetters:从getters中获取方法,以数组的方式返回

mapMutations:从mutations中获取操作,以数组的方式返回

mapActions:从actions中获取动作,以数组的方式返回

2.我们可以通过这些方法来简化代码

有两种写法,当我们的名字和store中的名字一样时就可以使用数组的简化写法

2.1引入

复制代码
import {mapState,mapGetters,mapMutations,mapActions} from 'vuex'

2.2在method中

复制代码
    ...mapActions({'a':'add'}),
    // ...mapActions(['add']),
    ...mapMutations(['ADD'])

2.3在computed中

复制代码
    ...mapState(['sum']),
    ...mapGetters(['getT']), 

Vuex的模块化编码

1.在store下创建count.js,将上篇store中的方法封装到一个对象中并暴露

复制代码
export default {
    namespaced:true,
    //用于操作组件中的动作
    actions: {
        add(context, value) {
            context.commit('ADD', value)
        },
    },
    //用于操作数据
    mutations: {
        ADD(state, value) {
            state.sum += value
        },
    },
    //用于存储数据
    state: {
        sum: 1,
    },
    //公共方法
    getters: {
        getT(state) {
            return state.sum * 10
        }
    }
}

2.在store中引入count.js,初始化时进行模块化

复制代码
import Vue from 'vue'
import Vuex from 'vuex'


import countOptions  from './count'

Vue.use(Vuex)


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

3.在组件中定义接收模块化Vuex的方法

3.1原生

复制代码
  methods:{  
    add(s){
        this.$store.dispatch('countOptions/add',s)
    },
     a(s){
        this.$store.commit('countOptions/ADD',s)
    }
  },
  computed:{  
    sum(){
        return this.$store.state.countOptions.sum
    },
    getT(){
        return this.$store.getters['countOptions/getT']
    }
    }, 

3.2调用Vuex中的方法

复制代码
  methods:{ 
    ...mapActions('countOptions',{'a':'add'}), 
    ...mapMutations('countOptions',['ADD'])
    // add(s){
    //     this.$store.dispatch('countOptions/add',s)
    // },
    //  a(s){
    //     this.$store.commit('countOptions/ADD',s)
    // }
  },
  computed:{ 
    ...mapState('countOptions',['sum']),
    ...mapGetters('countOptions',['getT']), 
//     sum(){
//         return this.$store.state.countOptions.sum
//     },
//     getT(){
//  return this.$store.getters['countOptions/getT']
//     }
    }, 

4.重新启动项目运行即可

相关推荐
Kevin在掘金920144 分钟前
c#、.net、Fluent UI Blazor
前端
LovelyAqaurius6 分钟前
RSA加密算法:从数学魔法到现实守护
前端
Hilaku7 分钟前
说实话,React的开发体验,已经被Vue甩开几条街了
前端·javascript·vue.js
星语卿7 分钟前
Js事件循环
javascript
datagear8 分钟前
如何在DataGear 5.4.1 中快速制作HTTP数据源服务端分页的数据表格看板
javascript·数据可视化
蛋黄蛋黄11 分钟前
微信表情怎么在自己的项目使用微信表情?-> [开源仓库]wechat-emoji
前端·github
汪子熙12 分钟前
错误剖析:net::ERR_HTTP2_PROTOCOL_ERROR 200 (OK) 的含义与解决之道
前端
猩猩程序员14 分钟前
Rust 1.88 稳定支持裸函数:更安全简洁的汇编函数写法
前端
艾克马斯奎普特15 分钟前
为什么响应性语法糖最终被废弃了?尤雨溪也曾经试图让你不用写 .value
前端·vue.js·代码规范
qiyue7715 分钟前
AI编程专栏(一)- 评估AI编程工具对编程语言支持情况
前端·ai编程