Article From:

Using Vuex to manage application status

1. Introduction of the background

Like before we have navigation menu bar contraction and expansion function, but because of component packaging reasons, hidden buttons in the head component, and navigation menu in the navigation menu component, this involves the component contraction state sharing problem. The contraction expansion button triggers the modification of the shrinkage state, and the navigation menu needs to be collected according to the receipt.Shrink state to set the width of the navigation bar. This requires refreshing the navigation menu style when the shrinkage state changes. Follow up similar component state sharing will also have many.In order to solve the problem of sharing state between components and increase the usability of component interaction, we introduce vuex to manage application state.

2. Installation dependence

Perform the following command to install vuex dependency.

yarn add vuex

3. Add configuration

3.1 Add Store

Under the SRC directory, create a new store directory to manage the application state and create a store in index. js.



import Vue from 'vue'
import vuex from 'vuex'


const store = new vuex.Store({
        collapse:false  // Navigation bar contraction state
        collapse(state){  // Changing contraction state
            state.collapse = !state.collapse;

export default store

3.2 Introduction of Store

 Introducing store into main.js

4. Using Store

4.1 modify state

Replace the original logic in the function that responds to the folded navigation bar by sending a submission request to change the contraction state.

4.2 Obtain state

Instead of citing collapse, $store.state.collapse was quoted.

Binding different styles according to the contraction state enables the navigation menu bar to update the page effect according to the contraction state.




5. Test effect

Enter the home page, click the shrink button, and the effect is as shown below.

Store Modularization

Now that our state is maintained in index. js, the state becomes bloated as soon as it is over, and we can modularize it as needed.

1. file structure

Modular file structure

2. Store encapsulation

Overwrite index. JS and introduce modularity, where the previous state is extracted into the AppStore, and there may be UserStore, MenuStore, and so on.

import Vue from 'vue'
import vuex from 'vuex'


import AppStore from './modules/AppStore.js';

const store = new vuex.Store({
    modules: {
        app: AppStore   
        // Other

export default store


export default {
    state: {
        appName: "I like Kitty",  // apply name
        collapse:false  // Navigation bar contraction state
    getters: {
        collapse(state){// Corresponds to the above state
            return collapse;
    mutations: {
        collapse(state){  // Changing contraction state
            state.collapse = !state.collapse;
    actions: {


 3. State reference

Where the store status is quoted, the module name is added.

If there are too many references in a file and the references are long and stinky, you can use the mapState, mapGetter, and mapActions tools to simplify them.

If there are more references in MenuBar.vue, we use mapState to simplify references to attributes.The following diagram gives aliases to the status.

 Where the state is referenced, it can be accessed directly by the alias it defines.


mapState、mapGetter、mapActions The tool is very useful for the large number of long and smelly state in the file, and can be used properly.

Packaging Shrink components

1. Component encapsulation

 The following chart shows new directory and file, encapsulating the shrink component to expand the navigation bar component.


  <svg t="1492500959545" @click="toggleClick" class="hamburger" :class="{'is-active':isActive}" style="" viewBox="0 0 1024 1024"
    version="1.1" xmlns="" p-id="1691" xmlns:xlink="" width="64" height="64">
    <path d="M966.8023 568.849776 57.196677 568.849776c-31.397081 0-56.850799-25.452695-56.850799-56.850799l0 0c0-31.397081 25.452695-56.849776 56.850799-56.849776l909.605623 0c31.397081 0 56.849776 25.452695 56.849776 56.849776l0 0C1023.653099 543.397081 998.200404 568.849776 966.8023 568.849776z"
    <path d="M966.8023 881.527125 57.196677 881.527125c-31.397081 0-56.850799-25.452695-56.850799-56.849776l0 0c0-31.397081 25.452695-56.849776 56.850799-56.849776l909.605623 0c31.397081 0 56.849776 25.452695 56.849776 56.849776l0 0C1023.653099 856.07443 998.200404 881.527125 966.8023 881.527125z"
    <path d="M966.8023 256.17345 57.196677 256.17345c-31.397081 0-56.850799-25.452695-56.850799-56.849776l0 0c0-31.397081 25.452695-56.850799 56.850799-56.850799l909.605623 0c31.397081 0 56.849776 25.452695 56.849776 56.850799l0 0C1023.653099 230.720755 998.200404 256.17345 966.8023 256.17345z"

export default {
  name: 'hamburger',
  props: {
    isActive: {
      type: Boolean,
      default: false
    toggleClick: {
      type: Function,
      default: null

<style scoped>
.hamburger {
  display: inline-block;
  cursor: pointer;
  width: 20px;
  height: 20px;
  transform: rotate(90deg);
  transition: .38s;
  transform-origin: 50% 50%;
} {
  transform: rotate(0deg);

2. Introducing components

HeadBar.vue Import components

The response function is modified by store.

3. Test effect

Entering the home page, the effect is as shown below.


Bread crumbs assembly

The breadcrumbs are extracted from the main content and packaged into BreadCrumb.


  <el-breadcrumb separator="/" class="breadcrumb">
    <el-breadcrumb-item v-for="item in $route.matched" :key="item.path">
      <a href="">{{ }}</a>

export default {
  data() {
    return {
  methods: {

  mounted() {


<style scoped lang="scss">
.breadcrumb {
  padding: 10px;  
  border-color: rgba(38, 86, 114, 0.2);
  border-bottom-width: 1px;
  border-bottom-style: solid;
  // background: rgba(180, 189, 196, 0.1);

main.js Introduction

Dynamic skin change

1. Functional background

Previous dynamic skin changes can only refresh the colors of Element-related components, and further modifications are needed if we want to synchronize changes in our head area during skin changes. Next, we implement this function by giving skin components to update Element components.When you color, you can customize and insert some custom actions.

2. Improved ThemePicker

Modify the ThemePicker plug-in, bind the export function and the theme color parameter.

3. Parent component function binding

Add custom synchronization update logic to the parent component binding function.

Here is the time to switch the theme color, set the store state, save the shared theme color, so that other components bound to the theme color can be automatically updated.

4. Add shared state

Define the color related state in the store.

5. Shared state import

The theme color state is introduced at the component to be used.

The component style binds the theme color state, and the theme color updates the component background color style.

6. Test effect

Enter the home page and click the dynamic skin changing color pickup. The skin effect is as follows.


Source download

Code cloud:

Author: Chao Yu recalls light dust
Copyright, welcome to reprint, please indicate the original author and source.

Leave a Reply

Your email address will not be published. Required fields are marked *