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小時內刪除侵權內容。

版權聲明：本文內容由網絡用戶投稿，版權歸原作者所有，本站不擁有其著作權，亦不承擔相應法律責任。如果您發現本站中有涉嫌抄襲或描述失實的內容，請聯系我們jiasou666@gmail.com 處理，核實后本網站將在24小時內刪除侵權內容。