preface

In VUE, components are scoped independently. Communication between parent and child components can be passed through prop properties, but communication between sibling components is more difficult. For example, if component A wants to tell component B something, A will tell their parent component first, and then the parent component will tell COMPONENT B. When there are a lot of components and a lot of things to communicate with each other, dad components have to take care of them so many things, very tired. Vuex is designed to solve this problem by allowing multiple sub-components to communicate easily.

Project introduction

An event in a to-do list that may have several states, unfinished, completed, canceled, deleted, and so on. The event needs to switch between these states, which makes it very convenient to manage using VUEX.

Let’s see how VUex manages state:

All components call actions, distribute mutation to change the state, and then the state is updated to each component through the getter. State stores data to the localStorage using localStorage. The saved data will be read the next time you restart the storage system.

modular

Why modularity? When our project is relatively large, with many components and functions, a lot of content will be stored in the state, and the whole store will be huge and difficult to manage.

My modular Store directory is as follows:

| - store / / / deposit vuex code | | - eventModule / / events module | | | - actions. Js | | | - getters. Js | | | - index. Js | | | - mutations. Js | | | - state. Js | | - themeModule / / theme color module | | | - actions. Js | | | - getters. Js | | | - index. Js | | | - mutations. Js | | | - state. Js | | - index. The core of js / / vuex, create a storeCopy the code

As you can see, each module has its own state, mutation, action, and getter, which allows us to divide our project into multiple modules to use VUEX based on functionality without being confused about maintenance.

State management

Next, let’s look at a process for vuEX to accomplish state management. For example: a todo item, when checked, is removed from the to-do list and appears in the completed list. The process is that the status of the to-do item changes. When checked, it executes a method, so we’ll write that method first. Create a moveToDone method in the event_list.vue file.

This.$store.dispatch(' eventDone ', id); }}Copy the code

Trigger the action with the store.dispatch method in moveToDone, and then register the action in eventModule/actions.js, taking an ID.

module.exports = { eventdone = ({ commit }, param) =>{ commit('EVENTDONE',{id: param}); }}Copy the code

Action commits the payload (that is, the {id: param} object) to a mutation named ‘EVENTDONE’ by calling store.mit

module.exports = { EVENTDONE(states,obj){ for (let i = 0; i < states.event.length; i++) { if (states.event[i].id === obj.id) { states.event[i].type = 2; states.event[i].time = getDate(); var item = states.event[i]; states.event.splice(i, 1); // Delete the event break from the array; } } states.event.unshift(item); // Store the event in the first element of the array local.set(states); // Store the entire state locally}}Copy the code

State was modified by mutation, and an event attribute was stored in state

const state = {
    event: []
};
export default state;Copy the code

To get the event in this state in the component, write a getters

Const getters = {getDone(states){return states.event.filter(function (d) {if (d.type === 2) {// type == 2 return d; // Return completed event}}); }}; export default getters;Copy the code

Each module contains an index.js file that contains its state, mutation, action, and getters

import * as func from '.. /function'; import * as actions from './actions.js'; import * as mutations from './mutations.js'; import state from './state.js'; import getters from './getters.js'; module.exports = { state, getters, actions, mutations }Copy the code

Create a store object in store/index.js to hold this Module

import Vue from 'vue';
import Vuex from 'vuex';
import event from './eventModule';
Vue.use(Vuex);
module.exports = new Vuex.Store({
    modules: {
        event
    }
});Copy the code

Finally, on the event_list.vue component, we get this never-completed state change to completed state by computing the property computed, using getters in the store object

computed: { getDone(){ return this.$store.getters.getDone; }}Copy the code

This completes the entire flow from ‘not done’ => ‘done’ from committing the change to reading the updated view, which is how VuEX works. Through module encapsulation, it is more convenient to develop and maintain multi-module projects.

Demo Address:demo

Source code address:notepad