vuex state management VUEX state management

VUEX state management

VUEX is a state management tool VUE provides, specifically what can he do, for example, there is such a business scenarios:

When users sign in, you can set his login information. Users go to the home page, you can display the user's login information.

In fact, it used to share information between different components.

We use vue-element-admin , for example, to explain the use of VUEX.

//store/index.js

import Vue from 'vue'
import Vuex from 'vuex'
import getters from './getters'
import app from './modules/app'
import settings from './modules/settings'
import user from './modules/user'

Vue.use(Vuex)


const store = new Vuex.Store({
  modules: {
    app,
    settings,
    user
  },
  getters，
  plugins:[
     
] 
})

export default store

Build store, the store support modules, there are three modules in this store.

app module definition

//modules/app.js

import Cookies from 'js-cookie'

const state = {
  sidebar: {
    opened: Cookies.get('sidebarStatus') ? !!+Cookies.get('sidebarStatus') : true,
    withoutAnimation: false
  },
  device: 'desktop'
}

const mutations = {
  TOGGLE_SIDEBAR: state => {
    state.sidebar.opened = !state.sidebar.opened
    state.sidebar.withoutAnimation = false
    if (state.sidebar.opened) {
      Cookies.set('sidebarStatus', 1)
    } else {
      Cookies.set('sidebarStatus', 0)
    }
  },
  CLOSE_SIDEBAR: (state, withoutAnimation) => {
    Cookies.set('sidebarStatus', 0)
    state.sidebar.opened = false
    state.sidebar.withoutAnimation = withoutAnimation
  },
  TOGGLE_DEVICE: (state, device) => {
    state.device = device
  }
}

const actions = {
  toggleSideBar({ commit }) {
    commit('TOGGLE_SIDEBAR')
  },
  closeSideBar({ commit }, { withoutAnimation }) {
    commit('CLOSE_SIDEBAR', withoutAnimation)
  },
  toggleDevice({ commit }, device) {
    commit('TOGGLE_DEVICE', device)
  }
}

export default {
  namespaced: true,
  state,
  mutations,
  actions
}

actions: to provide for external calls.

state: the state is defined app

namespaced: namespace support

toggleSideBar() {
      this.$store.dispatch('app/toggleSideBar')
    }

Can. $ Store.dispatch trigger action method through this.