vuex store使用总结 3 (模块化的使用 )
请先翻看前 两节 再看这里的内容
https://vuex.vuejs.org/zh/guide/modules.html
由于使用单一状态树,应用的所有状态会集中到一个比较大的对象。当应用变得非常复杂时,store 对象就有可能变得相当臃肿。
为了解决以上问题,Vuex 允许我们将 store 分割成模块(module)。每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块——从上至下进行同样方式的分割:
随着项目的扩大, 上一章节的 提供的方式 已经 满足不了我们的需求了。 所以呢 我们对他进行模块化的处理,对他们进行改造
现在 store 文件夹结构 变成这样了
index.js
import Vue from 'vue'
import Vuex from 'vuex'
import moduleAchat from '/module/moduleA/ChatInfo.js'
import moduleAuser from '/module/moduleA/UserInfo.js'
Vue.use(Vuex)
export const store = new Vuex.Store({
modules:{
chat:moduleAchat,
user:moduleAuser
}
})
store.state.chat // 获取moduleAchat
store.state.user // 获取moduleAuser
ChatInfo.js
const state = {
//设置属性 用来存储数据
message: {}
name: {}
}
const getters = {
}
const mutations = {
//更改用户状态信息
setLocalUser(state, data) {
if (data) {
state.name = data
} else {
state.name = null
}
},
//更改属性的状态
setMessage(state, data) {
state.message = data
}
}
const actions = {
}
export default {
state,
getters,
mutations,
actions
}
UserInfo.js
const state = {
//设置属性 用来存储数据
message: {},
localuser: {},
isLogin: false
}
const getters = {
//对应方法 用来获取属性的状态
getMessage: state => state.message
}
const mutations = {
//更改属性的状态
setMessage(state, data) {
state.message = data
}
}
const actions = {
//应用 mutation
setUser({
commit
}, data) {
commit('setMessage', data)
}
}
export default {
state,
getters,
mutations,
actions
}
是不是 感觉越用越简单了
这里就是 Vuex 模块化使用的全部内容了
chat:moduleAchat,
user:moduleAuser
其实还能再对他继续进行扩充:
目前 state getter mutations action 都是在一个文件中;
可以吧他们 分别 分成四个文件 和一个 index !
大于更加大型的 目前可以这么搞!
目前我的 项目够用了, 强加上去没有好处反而 有害
另外两篇: