vue —— vuex namespaced模块化编码

在需求过多的时候就会发生在actions mutations state getters 编写代码过多的情况会很混乱，可以把每个需求的代码进行分组查看时便可根据不同的需求查看。不过在每个需求里还是要配置actions mutations state getters
使用方法

在分组时添加 namespaced: true 开启
调用时
mapState(‘分组名’, [‘属性1’, ‘属性2’, ‘属性3’,……])
mapGetters(‘分组名’, [‘属性1’, ‘属性2’, ‘属性3’,……])
mapActions(‘分组名’, [‘方法1’, ‘方法2’, ‘方法3’,……])
mapMutations(‘分组名’, [‘方法1’, ‘方法2’, ‘方法3’,……])

注意export时使用modules

例如

// 求和相关的配置
const countOptions = {namespaced: true,actions: {jia: function(context,value){console.log('actions中的jia',context,value)context.commit('JIA',value)}},mutations: {JIA(state,value){console.log('mutations中的JIA',state,value)state.sum += value},},state: {sum: 0,school: '学校',subject: '学科',},getters: {bigSum(state){return state.sum*10}}
}
// 创建 暴露 store
export default new Vuex.Store({modules: {countAbout: countOptions,}
})

methods: {...mapActions('countAbout',['jia']),
},
computed:{...mapState('countAbout',['sum','school','subject']),...mapGetters('countAbout',['bigSum']),
}

<h1>{{sum}}</h1>
<h1>{{school}}</h1>
<h1>{{subject}}</h1>
<h3>当前求和放大后为：{{bigSum}}</h3>
<select v-model.number="n"><option value='1'>1</option><option value='2'>2</option><option value='3'>3</option>
</select>
<button @click='jia(n)'>+</button>

不借助map……使用

this.$store.getters[‘分组名/方法名’]——获取getters的数据
this.$store.state.分组名.属性名——获取指定分组下的属性
this.$store.commit(‘分组名/方法名’, ‘参数’)——使用commit下的方法
this.$store.dispatch(‘分组名/方法名’, ‘参数’)——使用dispatch下的方法

vue —— vuex namespaced模块化编码相关推荐

VUE学习(二十一)、Vuex（getters、mapState与mapGetters、mapMutations与mapActions、多组件共享数据、模块化编码）
VUE学习(二十一).Vuex(getters.mapState与mapGetters.mapMutations与mapActions.多组件共享数据.模块化编码) 一.Vuex普通实现求和案例演示 ...
大型项目实战Vue+Vuex+Koa2+Socket.io+Jssdk联合打造无人点餐系统
课程简介此套视频教程为2018年推出的,项目使用Vue+Vuex+Koa2+Socket.io+Jssdk+小票打印机打造无人点餐系统,课程视频.课件.源码齐全,手把手教会学员用Vue开发一个颠覆传 ...
用Vue3.0+typescript写vuex的模块化拆分
用Vue3.0+typescript写vuex的模块化拆分最近自己学习了下vue3.0+ts,在vuex这一块遇到些问题记录一下以下代码中的写法请参考官方vuex文档: https://next. ...
基于Vue, Vuex 和 ElementUI 构建轻量单页Hexo主题Lite
Hexo Theme Lite Keep Calm, Lite and Writing. light single page blog application theme, using Vue, Vu ...
vue vuex vue-router后台项目——权限路由（超详细简单版）
项目地址:vue-simple-template 共三个角色:adan barbara carrie 密码全是:123456 adan 拥有最高权限A 他可以看到 red , yellow 和 bl ...
记录一下使用vue/vuex+SSR框架遇到的bug
项目框架:vue+vuex+vue-server-render 问题描述:页面中有个区块通过state.jkyl (JSON Object)来控制是否需要显示,页面未登录前jkyl的数据是为空的,待登 ...
Vue Vuex的详细教程
Vue Vuex的详细教程 Vuex 是什么? Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式.它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变 ...
Vue中CSS模块化最佳实践
Vue风格指南中介绍了单文件组件中的Style是必须要有作用域的,否则组件之间可能相互影响,造成难以调试. 在Vue Loader Scope CSS和Vue Loader CSS Modules两节 ...
Vue+Vuex+Axios+ECharts 画一个动态更新的中国地图
一.生成项目及安装插件 # 安装 Vue Cli npm install vue-cli -g# 初始化项目 vue init webpack vue-china-map# 切到目录下 cd vue- ...

vue —— vuex namespaced模块化编码

注意export时使用modules

不借助map……使用

this.$store.getters[‘分组名/方法名’]——获取getters的数据

this.$store.state.分组名.属性名——获取指定分组下的属性

this.$store.commit(‘分组名/方法名’, ‘参数’)——使用commit下的方法

this.$store.dispatch(‘分组名/方法名’, ‘参数’)——使用dispatch下的方法

vue —— vuex namespaced模块化编码相关推荐

最新文章

热门文章