vuex 的模块化+命名空间

一、目的：让代码更好维护，让多种数据分类更加明确
二、修改 store.js

const person = {namespaced: true; // 开启命名空间state: {},getters: {},actions: {},mutations: {}
}const count = {namespaced: true; // 开启命名空间state: {},getters: {},actions: {},mutations: {}
}const store = new Vuex.Store({mudules: {person,count}
})

三、开启命名空间后，组件中读取 state 数据

// 方式一：直接读取
this.$store.state.module1.xxx
// 方式二：借助 mapState 读取
...mapState('person', ['xxx', 'xxx', 'xxx']); // 指明哪个数据来自哪个模块

四、开启命名空间后，组件中读取 getters 数据

// 方式一：直接读取
this.$store.state.getters['person/xxx']
// 方式二：借助 mapGetters 读取
...mapGetters('person', ['xxx']);

五、开启命名空间后，组件中调用 dispatch

// 方式一：直接调用
this.$store.dispatch('person/xxx', data)
// 方式二：借助 mapActions 读取
...mapActions('person', {key: 'value'});

六、开启命名空间后，组件中调用 commit

// 方式一：直接调用
this.$store.commit('person/xxx', data)
// 方式二：借助 mapMutations 读取
...mapMutations('person', {key: 'value'});

vuex 的模块化+命名空间相关推荐

Vue学习记录8，vue脚手架配置代理的两种方式，Github搜索案例，vue-resource，三种插槽，Vuex及搭建Vuex环境，getter和四个map方法的使用，模块化+命名空间
目录 vue脚手架配置代理方法一方法二 Github搜索案例 UserList.vue UserSearch.vue 效果图 vue-resource 插槽默认插槽具名插槽作用域插槽 Vue ...
用Vue3.0+typescript写vuex的模块化拆分
用Vue3.0+typescript写vuex的模块化拆分最近自己学习了下vue3.0+ts,在vuex这一块遇到些问题记录一下以下代码中的写法请参考官方vuex文档: https://next. ...
Vuex State模块化
当应用非常复杂的时候,store对象就会变得非常臃肿. 为了解决上面的问题,我们将store分成模块文件目录如下方案一: 方案二: 状态管理中 state 就相当于 vue中 data属性, ge ...
vue —— vuex namespaced模块化编码
在需求过多的时候就会发生在actions mutations state getters 编写代码过多的情况会很混乱,可以把每个需求的代码进行分组查看时便可根据不同的需求查看.不过在每个需求里还是要 ...
vuex的模块化管理~~~狂徒李四
路由模块化创建问价路径如下: 路由模块化思路 /** * * 还是导入导出那一套,首先新建语义化的文件,在js文件中导出export default { //路径 } * 在main.js引入,将引 ...
3项目里面全局用less变量 cli vue_Vue实战14——抽离全局less变量与Vuex持久化、多模块构建...
上文中说到了利用Element-ui优化了导航栏,本节介绍抽离公共的less变量与利用Element-Ui实现登录注册页面.本项目git地址: https://gitee.com/vuejslearn ...
vue2理论学习（全套教程，包含vuex、路由等）
文章目录一. vue基础 1. vue的介绍 1.1 vue的特性 1.2 MVVM 1.3 vue数据代理 1.3.1 Object.defineproperty() 1.3.2 数据代理 2. ...
Vue2基础、组件化编程、脚手架、Vuex、Vue路由、UI组件库
尚硅谷张天禹老师讲课学习视频 1.Vue简介 Vue2中文官网 1.1 Vue 介绍一套用于构建用户界面的渐进式JavaScript框架构建用户界面:把数据通过某种办法变成用户界面渐进式:可以 ...
Vue2.x - Vuex
目录初识Vuex 什么是Vuex 为什么要用Vuex Vuex的基本使用计数器案例在项目中使用Vuex 安装Vuex到项目中引入vuex插件并注册创建store仓库实现全局组件可访问的st ...

vuex 的模块化+命名空间

vuex 的模块化+命名空间相关推荐

最新文章

热门文章