vuex模块化写法

之前所有的数据、方法都统一写在一个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)

猜你喜欢