vuex的模組化使用

2022-07-21 19:06:13 字數 849 閱讀 1262

store檔案如下

1.modules下檔案是模組化的劃分,裡面的js有state,action,mutations.然後通過

export default

方式匯出。

2.index.js中匯出的格式如下

new

vuex.store(,

mutations:{},

actions:{}

},...

},getters:

})

所以index.js中需要先對modules進行處理,通過require.context獲取modules下所有js檔案,如下

const modulesfiles = require.context('./modules', true, /\.js$/)

const modules = modulesfiles.keys().reduce((modules, modulepath) =>, {})

然後對getters的處理可以摘出來放到單獨js裡。

因為modules的處理,下面相對於普通的使用方式多了個命名空間

3.獲取store裡的資料

1 this.$store.state.命名空間.

2 import from 'vuex';

computed:{

...mapgetters({

'getters裡定義的key(其實對應的state值)'

4修改store值

this.$store.dispatch('命名空間/actions裡的函式名',引數資料),

this.$store.commit('命名空間/mutations裡的函式名',引數資料)

Vuex的模組化

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

vuex模組化設定

import vue from vue import vuex from vuex vue.use vuex 首先宣告乙個需要全域性維護的狀態 state,比如 我這裡舉例的resturantname const modulesfiles require.context modules false,...

Vuex的模組化 優點

前言 如果說我們的vuex的倉庫 量巨大,我們要不要採用就像後端與一樣的分層,要不然一噸的 放在main裡,呵呵。所以我們要採用模組化!其中我們的store.js被我們封裝成了這樣子 import api from utils api var api new api goods const stat...