Vue 如何實現vuex模組化

2021-09-25 14:27:23 字數 1746 閱讀 5037

就像react的生態系統有redux一樣，vue的生態系統中的一員vuex也扮演著重要的角色。由於現在很多優秀的部落格都介紹了vuex的原理以及基本用法，因此本文不會在此贅述。而是依據筆者的專案，簡單介紹如何實現vuex模組化。

vuex 入門，這是筆者瀏覽的一篇不錯的入門文章。

cnpm install vuex
在src目錄下新增store資料夾，然後新增modules資料夾，存放每個模組的狀態管理檔案，然後新增action.js，getters.js，index.js，mutation.js，types.js

每個js含義如下

以使用者資訊模組為例子,user.js內容如下：

import types from '@/store/types'


const state = 


var getters = ,


isuser(state) 


}const actions = 


},clearuserinfo(context)


}const  mutations = ,


[types.clear_userinfo](state)


}export default
從user.js中，筆者定義了state，getters，actions，mutations。通過vuex的getters可以獲取定義的狀態state。如果要操作狀態，則要觸發actions 提交mutations修改狀態。

type.js內容如下：

const setuserinfo = "setuserinfo";//設定登入使用者資訊


const clear_userinfo = "clear_userinfo";//清除使用者資訊


export default
index.js內容如下，module允許我們模組化管理狀態：

import vue from 'vue'


import vuex from 'vuex'


vue.use(vuex)


import getters from './getters'


import actions from './actions'


import mutations from './mutations'


import user from './modules/user'


export default new vuex.store(


})
其它js中暫未使用到，所以暫未列出

在main.js中引入

import store from './store/index'


new vue()
前面的準備工作完成後，我們就可以在元件中使用了。

獲取狀態，比如要獲取使用者是否為管理員，是管理員才顯示管理選單：

}
修改狀態，比如登陸後設定使用者的資訊，登陸其它的**在此省略了：

var userinfo = response.data.result;


userinfo.issignin = true;


this.$store.dispatch("setuserinfo", userinfo);
本文簡單介紹了如果在專案中模組化管理狀態，統一配置管理不僅有助於我們的協同開發，也有利於提高**的可讀性。

vuex模組化設定

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

Vuex的模組化

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

Vuex的模組化 優點

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