VUEX各個模組的封裝以及Router封裝

2021-10-23 16:05:43 字數 2572 閱讀 6104

actions.js


getters.js


mutations.js


mutationsfun.js


state.js
//在store的檔案下index.js引入


import vue from


'vue'


import vuex from


'vuex'


import createpersistedstate from


"vuex-persistedstate"


;//持久化


import


*as actions from


'./actions'


import


*as getters from


'./getters'


import state from


'./state'


import mutations from


'./mutations'


vue.


use(vuex)


export


default


newvuex.store


()j
state.js
const state =


export


default state
mutations.js

import


*as fun from


'./mutationsfun'


//*as預設匯入的是乙個物件


const mutations =


,[fun.set_isshow]


(state, isshow)


,[fun.set_bool]


(state, bool)


}export


default mutations
mutationsfun.js
export


const set_list =


'set_list'


export


const set_isshow =


'set_isshow'


export


const set_bool =


'set_bool'
getters.js
export


const


list


= state => state.list


export


const


isshow


= state => state.isshow


export


const


bool


= state => state.bool
actions.js
import


*as fun from


'./mutationsfun'


export


const


set_list


=function


(commit,list)
router資料夾下乙個index.js 乙個list.js 按需建立


import vue from


"vue"


;import vuerouter from


"vue-router"


;import routerslist from


"./list"


;import helloworld from


"@/components/helloworld"


;vue.


use(vuerouter)


;// 匯入路由檔案


const routes =[,


...routerslist//es6...託找運算子];


const router =


newvuerouter()


;export


default router;


import msmk from


"../views/msmk/msmk"


;//底部tabbar


import index from


"../views/msmk/index"


;//首頁


import course from


"../views/msmk/course"


;//課程


import record from


"../views/msmk/record"


;//約課記錄


import practise from


"../views/msmk/practise"


;//聯絡


const routeslist =


[// 註冊tabbar及子路由},


},},


},}]


},// 註冊tabbar及子路由結束];


export


default routeslist;

Vuex中的模組

如果使用子模組中的state 就要寫 this.store.state.模組名.子模組的屬性 如果是子模組中的getter this.store.getter.getter屬性名 根模組中的getter有兩個引數 state,getter 子模組中的getter可以有三個引數分別是 state,ge...

vuex各模組與步驟詳解以及使用

下面是官網提供的vuex的執行流程 vuex的特點 針對非非同步操作 components中可以不用store.dispatch，直接觸發action，再執行commit觸發mutation去改變state 針對非同步操作 components上store.dispatch乙個action，得到資料...

Vuex的模組化

目錄 1.在store資料夾下建立modules資料夾，modules資料夾下的index.js用來彙總vuex的模組，並統一暴露。這樣只需在store的配置中引入modules即可。彙總所有vuex的模組 import home from home import login from login ...