Vuex进阶使用之modules模块化划分、mapState、mapActions辅助函数的使用

注解：vuex是一个很简单、很方便的技术，入门很简单，这里给大家详细介绍下vuex的进阶使用。

一、vuex模块化modules

1、项目根目录新建一个sotre文件夹，在store文件夹内，新建两个文件（一个文件，一个文件夹），一个index.js文件，一个modules文件夹。

目录结构：

store

index.js --文件

modules --文件夹

2、store->index.js

import Vue from 'vue' import Vuex from 'vuex' import modules from './modules' Vue.use(Vuex) export default new Vuex.Store({ state: { }, mutations: { }, actions: { }, modules:modules. //注意哦，后一个modules文件夹中有index.js文件，所以可以直接写文件夹名，前端中文件夹中有index.js 可以只写文件夹名(默认引入文件夹中的index.js) })

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

3、store->modules

目录结构

store

index.js

modules

index.js //将所有模块引入一个js文件，统一导出，store->index.js中就只需要引入modules,类似modules->index.js

cart.js //购物车模块

login.js //登陆模块

4、具体模块写法，cart.js

//cart.js const state={ cart:"one-sotre" } const actions={ cart({commit},data){ commit("cart",data) } }; const mutations={ cart(state,data){ state.cart=data; } } export default { state, actions, mutations }

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

5、将store->modules->[cart.js,login.js]导入store->modules->index.js中，统一处理导出

//store->modules->index.js import login from './login'; import cart from './cart'; export default{ login, //键值相同时,login:login==login cart }

1

2

3

4

5

6

7

6、在store->index.js中使用导出[login,cart]模块

import Vue from 'vue' import Vuex from 'vuex' import modules from './modules'. //简写，引入modules/index.js Vue.use(Vuex) export default new Vuex.Store({ state: { }, mutations: { }, actions: { }, modules:modules })

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

在main.js中引入即可。

7、vue components组件中使用

//使用vuex中的函数mapState、mapAction,需要注意mapState、mapGetter这两个需要数据实时更新的书写在computed计算属性中，mapAction等方法写在methods方法中。

//.vue,这里只讲两个方法，mapState和mapAction，mapState和[mapGetters,mapMutions,mapActions]写法可以简单分为两种，所以介绍两种写法.

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

这个文档聚集了modules 模块化写法,vuex基础用法，mapState、mapGetters辅助函数的使用。

javaScript Vue

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。