Getting state management (Vuex) of

1, code analysis

import Vue from 'vue';
import Vuex from 'vuex';

import user from './module/user';
import app from './module/app';
import apply from './module/apply';

Vue.use(Vuex);

export default new Vuex.Store({
    state: {
        //
 },
    mutations: {
        //
 },
    actions: {
        //
 },
    modules: {
        user,
        app,
        apply
    }
});

2, status management (Vuex) Introduction
vuex is specially developed for vue.js application state management. It uses the status of all components centralized storage management application, and a corresponding state rules to ensure a predictable manner changed.

There are five core state management, namely state, getter, mutation, action and module. Respectively, a brief look at them:
1, state
state as a single state tree, you need to define what we need to manage an array of objects, strings and so on in state, only here defined, in order to obtain the components in vue.js you define the state of the object.
2, getter
getter somewhat similar to the calculation of property vue.js when we need to derive some state from the state store, then we need to use getter, getter receives state as the first argument,

And getter return value based on its dependencies are cached, and only rely on the value getter in (the value of a need to derive the state of the state) changed the time will be recalculated.
3, mutation
only way to change the state of a state store is submitted mutation, very similar events. Each mutation has a string type of event types and a callback function,

We need to change the value of state will change in the callback function. We want to execute the callback function, then we need to perform a call to the appropriate method: store.commit.
. 4, action
action may submit mutation, store.commit may be performed in the action, and action may be any asynchronous operation. In the page if we want to call this action, you need to perform store.dispatch
5, module
Module is only resolved when the state in a very complicated bloated time, module can store is divided into modules, each module has its own state, mutation, action and getter.
https://blog.csdn.net/weixin_33275327/article/details/81483629

Vuex There are four main parts:

state: containing the respective states stored in the store.
getter: Vue similar to computing the attribute, the value returned is calculated in accordance with other getter or state.
mutation: a set of methods is to change the state of the performer store, only synchronous operation.
action: a set of methods, which may comprise asynchronous operation.
1, code analysis

import Vue from 'vue';
import Vuex from 'vuex';

import user from './module/user';
import app from './module/app';
import apply from './module/apply';

Vue.use(Vuex);

export default new Vuex.Store({
    state: {
        //
 },
    mutations: {
        //
 },
    actions: {
        //
 },
    modules: {
        user,
        app,
        apply
    }
});

Vuex There are four main parts:

3, custom status Management

export default {
    state: {
        breadCrumbList: [],
        tagNavList: []
    },
    getters: {
        // 这里的rootState 是 所有vuex 中的modelus 中的state，这里的user 也就是user.js 中的user
 menuList: (state, getters, rootState) => getMenuByRouter(routersList, rootState.user.access, false,
            rootState.user.isAdmin)
    },
    mutations: {
        setBreadCrumb(state, routeMetched) {
            state.breadCrumbList = getBreadCrumbList(routeMetched);
        }
 }
};

3, custom status Management

export default {
    state: {
        breadCrumbList: [],
        tagNavList: []
    },
    getters: {
        // 这里的rootState 是 所有vuex 中的modelus 中的state，这里的user 也就是user.js 中的user
 menuList: (state, getters, rootState) => getMenuByRouter(routersList, rootState.user.access, false,
            rootState.user.isAdmin)
    },
    mutations: {
        setBreadCrumb(state, routeMetched) {
            state.breadCrumbList = getBreadCrumbList(routeMetched);
        }
 }
};

weixin_42282999

Published 11 original articles · won praise 0 · Views 92

Private letter concerns

Getting state management (Vuex) of

Guess you like