【vue】vuex中modules的基本用法

1，什么时候用modules

由于使用单一状态树，应用的所有状态会集中到一个比较大的对象。当应用变得非常复杂时，store 对象就有可能变得相当臃肿。
为了解决以上问题，Vuex 允许我们将 store 分割成模块（module）。每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块——从上至下进行同样方式的分割
在模块中使用:namespaced: true, 命名空间，添加之后，当前模块下的标识符可以和其它模块相同,用于解决不同模块的命名冲突问题

2，store文件结构

3.1 index.js中手动引入modules

import Vue from 'vue'
import Vuex from 'vuex'import bus from './modules/bus'
import app from './modules/app'const path = require('path')Vue.use(Vuex)let store = new Vuex.Store({state: {},mutations: {},actions: {},modules: {namespaced: true,app,bus}
});export default store

3.2 index.js 中动态引入modules

import Vue from 'vue'
import Vuex from 'vuex'
const path = require('path')Vue.use(Vuex)const files = require.context('./modules', false, /\.js$/)
let modules = {}
files.keys().forEach(key => {let name = path.basename(key, '.js')modules[name] = files(key).default || files(key)
})let store = new Vuex.Store({state: {},mutations: {},actions: {},modules
});export default store

4，app.js 文件中代码

let user = {namespaced: true,state: {},mutations: {setUser(state, val) {state.user = val;}},getters: {},actions: {setName(state, val) {return new Promise(resolve => {setTimeout(function () {state.user = val;resolve(state.user);}, 2000)})}}
}export default user;

5，配置main.js，挂载store

new Vue({el: '#app',router,store,components: { App: App },template: '<App/>'
})

6，vue中使用

    // commit 执行mutations里的方法，同步操作this.$store.commit('app/setUser', {name: '张三'});console.log(this.user.name);// dispatch 执行actions里的方法，异步操作this.$store.dispatch('app/setName', {name: '李四'}).then(res => {console.log(res.name);})

7，js中使用

// 引入 这里的store 就相当于页面中的 this.$store
import store from '@/store'export const setCurUser = (user) => {let curUser = store.app.userif(!curUser) {store.commit("app/setUser", user)return user}return curUser
}

注意：

1，vue和vuex的版本搭配

vue2使用vuex3；vue3使用vuex4. 否则会出现this.$store为undefined错误

延伸：

1，vuex的五种状态 state、getter、mutation、action、module

state:所有共享数据统一放到state中，与data类似

mutation: 类似于事件，用于改变状态

action: 和mutation相似，但是action是异步操作

getter: 类似vue中的computed，进行缓存，形成新的数据

modules: 分模块，大型项目一个对象管理会很臃肿

【vue】vuex中modules的基本用法相关推荐

vuex中mapState和mapMutations用法
// 1导入 Vue 和Vuex import Vue from 'vue' import Vuex from 'vuex' // user.js 就是分模块导入, moduleUser 导入的名字随 ...
[vue] Vuex中四个map方法的使用 mapState mapGetters mapActions mapMutations
1. mapState方法: 用于帮助我们映射state中的数据为计算属性 computed: {//借助mapState生成计算属性:sum.school.subject(对象写法)...mapSt ...
[Vuex系列] - Vuex中的getter的用法
Vuex 允许我们在store中定义"getter"(可以认为是store的计算属性).就像计算属性一样,getter的返回值会根据它的依赖被缓存起来,且只有当它的依赖值发生了改变 ...
vue.js中watch的六种用法（附实例解析）
文章目录监听器 watch Watch 用法1:常见用法 Watch 用法2:绑定方法 Watch 用法3:deep + handler Watch 用法4:immediate initWatch ...
记录使用Vue过程中的各种插件及教程（不定时更新）
本文为整理记录本人从18年初开始上手使用Vue以后,针对项目中业务需求所用到的各种插件及教程整理?. 目前市场上常用的三大Vue桌面端UI组件库:Element.iView.Ant Design Vu ...
vue之mapMutaions的使用 vuex中 action 用法示例 api.js的使用
vue之mapMutations的使用我们通过Mutation来改变store中的state,方法往往是在子组件中使用 this.$store.commit(); 来实现,但是这样的缺点是不容易查看 ...
vue 将数据保存到vuex中
在项目中遇到这样一个问题,就是在登入的时候同时需要从后台获取到左边的导航,但是如果使用h5的localStorage来保存导航信息,会出现app加载进去之后localStorage才保存进浏览器,在m ...
vue组件中数据共享——vuex
目录 vuex是什么? 使用vuex统一管理状态的好处什么样的数据适合存储到vuex中安装vuex 使用vuex vuex核心概念组件访问state中数据的第一种方式: 组件访问state中数据 ...
在vue项目中引入vuex(全局状态管理器)
目录 Vuex是什么? State Getter Mutation Action Module 项目结构 Vuex是什么? Vuex是一个专为Vue.js应用程序开发的状态管理模式.它采用集中式存储管 ...

【vue】vuex中modules的基本用法

【vue】vuex中modules的基本用法相关推荐

最新文章

热门文章