之前所有的数据、方法都统一写在一个index.js文件中,随着项目增大,需要储存的数据越来越多,全部写在index.js中是一点都不好找啊,而且有些方法可能超级长,看着是真难受,所以就动手把vuex模块化吧
1、第一步,在store文件下新建一个modules文件,保留index.js
2、第二步,举例使用。在modules文件下新建auth.js和collapse.js,这两个js文件就是我们要分离出来模块
//auth.js
const authState = {
namespaced: true, // 开启命名空间
state: {
count: 0,
},
mutations: {
setCount(state, data) {
state.count= data
},
},
actions: {},
getters: {
count: state => state.count,
}
}
export default authState
//collapse.js
const collapse = {
namespaced: true, // 开启命名空间
state: {
collapse: false,
},
mutations: {
setCollapse(state, data) {
state.collapse = data;
},
},
actions: {},
getters: {
collapse: state => state.collapse,
}
}
export default collapse
3、在index.js中引入这两个文件
import {createStore} from 'vuex'
import collapse from "./modules/collapse";
import authState from './modules/auth';
export default createStore({
modules: {
collapse,
authState
},
})
4、页面中使用
const store = useStore();
//获取值
const collapse = computed(() => {
return store.getters['collapse/collapse']
});
const count= computed(() => {
return store.getters['authState/count']
});
//设置值
store.commit('collapse/setCollapse', true)
store.commit('authState/setCount', 100)
以上是使用 commit 的写法
下面是习惯用 dispatch 的写法
5、dispatch写法
const collapse = {
namespaced: true, // 开启命名空间
state: {
collapse: false,
},
mutations: {
handleCollapse(state, data) {
state.collapse = data;
},
},
actions: {
setHandleCollapse({commit}, data) {
commit('handleCollapse', data)
},
},
getters: {
collapse: state => state.collapse
}
}
export default collapse
//页面使用
store.dispatch('collapse/setHandleCollapse',true)