Shulou(Shulou.com)05/31 Report--

This article mainly introduces the relevant knowledge of "Vuex modularization how to realize the state management of to-do items". The editor shows you the operation process through actual cases, the operation method is simple and fast, and it is practical. I hope this article "how to realize the state management of to-do items with Vuex modularization" can help you solve the problem.

Project introduction

An event in a to-do list that may have several states, incomplete, completed, cancelled, or deleted. This event needs to switch between these multiple states, so it is also very convenient to use vuex to manage it.

Let's take a look at how vuex does state management:

All components call actions, distribute mutation to modify state, and then state is updated to each component through getter. State stores data locally through localStorage, and reads the saved data the next time it is reopened.

Modularization

Why use modularization? When our project is relatively large, there are many components and functions, which will lead to a lot of content to be stored in the state, and the whole store will be very large and difficult to manage.

My modular store directory is as follows:

| |-store/ store vuex code | |-eventModule / / event 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.js / / vuex core to create a store |

As you can see, each module has its own state, mutation, action, getter, so that we can divide our project into multiple modules according to function to use vuex, and the later maintenance will not be confused.

State management

Next, let's take a look at a process by which vuex completes state management.

Take a chestnut: a to-do list, when checked, is removed from the unfinished list and appears in the completed list. In this process, the state of the to-do list has changed. When checked, a method is executed, so let's write this method first. Create a new moveToDone method in the event_list.vue file.

Methods: {moveToDone (id) {/ / move to completed this.$store.dispatch ('eventdone', id);}}

In the moveToDone method, the action is triggered by the store.dispatch method, and then we register the action in eventModule/actions.js and accept a parameter of id.

Module.exports = {eventdone = ({commit}, param) = > {commit ('EVENTDONE', {id: param});}}

Action submits the payload (that is, the object {id: param}) to the mutation named 'EVENTDONE' by calling store.commit, so let's register the mutation again

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); // 把该事件在数组中删除 break; } } states.event.unshift(item); // 把该事件存到数组的第一个元素 local.set(states); // 将整个状态存到本地 }} 通过 mutation 去修改 state, state里我们存放了一个 event 属性 const state = { event: []};export default state; 在组件中要获得这个 state 里的 event, 那就需要写个getters const getters = { getDone(states){ return states.event.filter(function (d) { if (d.type === 2) { // type == 2表示已完成 return d; // 返回已完成的事件 } }); }};export default getters; 然后每个module里都有一个index.js文件，把自己的state、mutation、action、getters都集合起来，就是一个module 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} 在 store/index.js 里创建一个 store 对象来存放这个module import Vue from 'vue';import Vuex from 'vuex';import event from './eventModule';Vue.use(Vuex);module.exports = new Vuex.Store({ modules: { event }}); 最后在 event_list.vue 组件上，我们通过计算属性 computed 来获取到这个从未完成的状态改变到已完成的状态，我们要用到 store 这个对象里的getters computed: { getDone(){ return this.$store.getters.getDone; }} 这样子，完成了 '未完成' =>

The whole process of 'completed' from submitting changes to updating view reading is also the whole process of vuex work. Through the packaging of module, it is more convenient for the development and maintenance of multi-module projects.

This is the end of the introduction to "how Vuex modularization implements the state management of to-do items". Thank you for your reading. If you want to know more about the industry, you can follow the industry information channel. The editor will update different knowledge points for you every day.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.