action 学习

action 和 子模块定义

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
 const state = {
    device: 'desktop',
    sidebar: {
        opened: true,
        withoutAnimation: false
    },
    openMenuIndex: [], // 默认打开的菜单
    pageState: null
};
const mutations = {
    TOGGLE_SIDEBAR: state => {
        state.sidebar.opened = !state.sidebar.opened;
        state.sidebar.withoutAnimation = false;
    },
    TOOGLE_DEVICE: (state, _device) => {
        state.device = _device;
    },
    CLOSE_SIDEBAR: (state, withoutAnimation) => {
        state.sidebar.opened = false;
        state.sidebar.withoutAnimation = withoutAnimation;
    },
    CHANGE_OPENMENU: (state, menuIndex) => {
        if (!state.openMenuIndex.includes(menuIndex)) {
            state.openMenuIndex.push(menuIndex);
        }
    },
    CHANGE_PAGESTATE: (state, pageState) => {
        state.pageState = pageState;
    }
};

const actions = {
    toggleSideBar({ commit }) {
        commit('TOGGLE_SIDEBAR');
    },
    closeSideBar({ commit }, { withoutAnimation }) {
        commit('CLOSE_SIDEBAR', withoutAnimation);
    },
    toggleDevice({ commit }, device) {
        commit('TOGGLE_DEVICE', device);
    },
    changeOpenMenu({ commit }, menuIndex) {
        commit('CHANGE_OPENMENU', menuIndex);
    },
     // eslint-disable-next-line
    moduleInversionWorkOrder({ commit }, data) {
        return new Promise((resolve, reject) => {
            inversionWorkOrder(data)
                .then(response => {
                    let _data = checkResponseCode(response);
                    resolve(_data);
                })
                .catch(error => {
                    reject(error);
                });
        });
    },
};

export default {
    state,
    mutations,
    actions
};

getters

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
const getters = {
    sidebar: state => state.AppStore.sidebar,
    device: state => state.AppStore.device,
    pageState: state => state.AppStore.pageState,
    openMenuIndex: state => state.AppStore.openMenuIndex,
    permission_routes: state => state.Permission.routes,
    roles: state => state.Permission.roles,
    userInfo: state => state.TechStore.userInfo
};
export default getters;

vuex出口文件

https://blog.csdn.net/qq_40410916/article/details/108122044

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
import Vue from 'vue';
import Vuex from 'vuex';
import getters from './Getters';

Vue.use(Vuex);

const modulesFiles = require.context('./Modules', true, /\.js$/);

const modules = modulesFiles.keys().reduce((modules, modulePath) => {
    // set './app.js' => 'app'
    const moduleName = modulePath.replace(/^\.\/(.*)\.\w+$/, '$1');
    const value = modulesFiles(modulePath);
    modules[moduleName] = value.default;
    return modules;
}, {});

const store = new Vuex.Store({
    modules,
    getters
});
export default store;