Shulou(Shulou.com)06/03 Report--

What is store split, that is, multi-module state management modules, I believe many inexperienced people are at a loss about this. Therefore, this paper summarizes the causes and solutions of the problem. Through this article, I hope you can solve this problem.

Friends who know vuex know that it is a container used by vue to centrally manage state. If you know Reduce, you will be very familiar with it when you see it. It is used to manage the global state and achieve mutual data access between different components. Instead of introducing vuex here, we will focus on vuex splitting store and multi-module management. We know that if a project is very large, there will be a lot of states. If there is no classification and all states are maintained in a state, state management will become very chaotic, which is not conducive to the later maintenance of the project. We now advocate modular development at the front end, in order to improve development efficiency and maintenance efficiency, and avoid repetitive work. So how does vuex solve this problem? At this time, modules, the protagonist we are going to talk about today, is about to make his debut.

In fact, this is very simple to use. Normally, when we use vuex, we define it like this:

States.js / / Save the status value of the application

Export default {bookList: [Journey to the West, Water margin, Dream of Red Mansions, Romance of the three Kingdoms]}

Mutations.js / / define the operation on the status value in this file, add, delete, modify and check.

Export default {/ / be careful not to perform asynchronous operations in mutations ADD_BOOK (state,book) {state.bookList.push (book); return true;}, DELETE_BOOK (state,id) {}}

Getters.js / / expose the values we defined in states to the store.getters object, so that we can access the data through the store.getters object in the component, and access the data through store.getters.bookList in the component

Export default {bookList:function (state) {return state.bookList;}}

Actions.js / / in fact, the method defined here only encapsulates the method defined in mutation.js, that is, to trigger the method in mutations.js. If the parameters need to be obtained asynchronously, we can wait here for the method in the mutations to be triggered after the asynchronous return is successful. The methods defined in both files in the component can be called directly, the methods defined in mutations are called through store.dispath ('ADDBOOK',book), the methods defined by actons are called through store.dispath (' ADDBOOK',book), and the methods defined by actons are called through store.commit ('ADD_BOOK',book).

Export default {/ / can operate asynchronously in action. Add_book ({commit}, book) {commit ('ADD_BOOK',book);}, delete_book ({commit}, book) {commit (' DELETE_BOOK',id);}}

Here sometimes we may also see a file called mutations_type.js. In fact, this file defines the method name in mutations. I didn't define this file anyway when I was using it. I will define it if I like it.

Once the file defined above is defined, we can add the objects we defined to the Store of vuex

Store.js

Import vue from 'vue'import vuex from' vuex'import states from'. / state.js'import mutatons from'. / mutations.js'import actons from'. / actions.js'import getters from'. / getters'vue.use (vuex); export default new vuex.Store ({ststes, mutatons, getters, actions})

In this way, we have written a complete store. We can see that we only have one master module here, so if we want to split the total module into several small modules, how should we define it?

Import vue from 'vue'import vuex from' vuex'import states from'. / state.js'import mutatons from'. / mutations.js'import actons from'. / actions.js'import getters from'. / getters'vue.use (vuex) Export default new vuex.Store ({modules: {mod1: {states, mutatons, getters, actions} Mod2: {}}) Import vue from 'vue'import vuex from' vuex'import states from'. / state.js'import mutatons from'. / mutations.js'import actons from'. / actions.js'import getters from'. / getters'vue.use (vuex) Export default new vuex.Store ({modules: {mod1: {states, mutatons, getters, actions}, mod2: {})

When I am working on a project, I usually write the state,mutations,actions,getter of a sub-module in a file such as:

Mod1.js

Export default {state: {}, mutatons: {}, actions: {}, getters: {}}

Mod2.js

Export default {state: {}, mutatons: {}, actions: {}, getters: {}}

Then merge several mod into store:

Import vue from 'vue'import vuex from' vuex'import mod1 from'. / mod1.js'import mod2 from'. / mod2.js'vue.use (vuex); export default new vuex.Store ({modules: {mod1:mod1, mod2:mod1}})

I feel that if I write in this way, the code structure is more intuitive and clear. And normally, a sub-module generally does not have too many states and methods. Of course, if there are indeed too many states and methods of sub-modules in the project, we recommend that you write state,actions,getters,mutations in separate files, and then put these files for different sub-modules in a folder, which represents a sub-state management module.

By splitting the overall store, it becomes clearer when it comes to state management and maintenance.

After creating the store, we need to mount the store to the vue

Import vue from 'vue'import store from'. / store'var vue = new Vue ({store,}). $mount ("# app")

The previously defined state can then be used and managed in the build

Export default {computed {bookList:this.$store.mod1.bookList,}, methods: {addBook:book= > this.$store.mod1.commit ('ADD_BOOK',book); / / note here that if you are using this method of submodules, you need to add the module name this is mod1, if not, you do not need to add. DeleteBook:id= > this.$store.mod1.disaptch ('DELETE_BOOK',id);}}

Summary:

Splitting the store will help us to better manage the status of the project and make our project maintenance more efficient. The development of each module does not affect each other.

All right, this is a brief introduction here, this time is mainly to introduce how to use. It doesn't go deep into his implementation principle, and for people who are not involved in the world of vue, I think it's enough.

After reading the above, have you mastered what is the method of store split, that is, multi-module state management modules? If you want to learn more skills or want to know more about it, you are welcome to follow the industry information channel, thank you for reading!

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.