vue-cli configuration uses Vuex's full process record

Preface

In Vue development, we often use some global data, such as user information, user permissions, some status and so on. Our traditional data is one-way, so we have to pass it layer by layer. So when we encounter a data shared by multiple components, this one-way data is difficult to maintain. For example, a component is nested in many layers, but the data change method has to be passed layer by layer. At this time we can introduce vuex.

vuex is a state management pattern developed specifically for Vue.js applications. It uses centralized storage to manage the status of all components of an application and uses corresponding rules to ensure that the status changes in a predictable manner.

The following figure is a flowchart of managing a shared state between components in the vuex official website

Installation and Usage

We can just use npm or yarn to install it in the vue-cli project we initialized.

npm install vuex --save // ​​yarn add vuex

Then we manage our state, create a new store folder in the src file in the root directory, and then create index.js as the entry file under the store, and then write our global state.

The state here is the global state, getters can be used as some states we derive, for example, we need to divide the count in the state, and then mutations are methods to change the state. The first parameter is our state Object and the second parameter is the value that I can pass in. Finally, the actions here submit mutations instead of directly changing the state. The action here can be an asynchronous function. The first parameter of the action function receives a context function that communicates with the store instance with methods and properties, and the second one is what we pass in.

Use state in the page, derive state through getter, and change state data through action dispatch

Here I introduce the corresponding state, getter derived data, mutation, action through mapState, mapGetters, mapMutations, and mapActions in vuex, and then I can use it directly on the vue instance. Of course, we can also directly introduce the store we defined and obtain the state, action, and mutation we want through the store instance.
The effect is as follows

Personally, I feel that the method of using vuex combined with the introduction at the beginning of map is more elegant, so I also used this method. For more reference definition methods, you can refer to the examples given on the vuex official website. I just used a form that I usually use.

vuex official documentation: vuex.vuejs.org/zh/guide/ac…

Modular Management

When our state becomes more, the store object may become very bloated, so I need to use modular management to process our state files in separate files, which is more conducive to our maintenance.

Modify the directory structure under our store file, create a modules directory and create a main.js in this directory.

The modified directory is shown in the figure, getters.js is some of the states we derived.

Then modify our index.js file code as follows

import Vue from 'vue'
import Vuex from 'vuex'
import getters from './getters'

Vue.use(Vuex)

const context = require.context('./modules', false, /\.js$/)
const moduleStores = {}

context.keys().forEach(key => {
    // Get the read file name and intercept const fileName = key.slice(2, -3);

    //Export file contents through context(key) const fileModule = context(key).default

    moduleStores[fileName] = {
        ...fileModule
    }
})

const store = new Vuex.Store({
  modules:
    ...moduleStores,
  },
  getters
})

export default store

Here we use webpack's api to automatically import the module we created

Then, the use of our component page is basically the same as before, just modifying some state values ​​by using mapState. Because we import it through the module, we now want to get the count under main in the store, so the modified mapState is introduced and used as follows

Now we have used a modular management method. For example, if we want to create a new state library, we only need to create it under modules, and the file format is exported in the form of main.js.

Vuex state persistence

When we use vuex as state management, we refresh the browser and the vuex data disappears. At this time, we need a data persistence operation, such as saving our data in localstroage, which is achievable. However, if we have many store modules, this may be troublesome, so we introduced the third-party plug-in library vuex-persistedstate.

To use it, just import it into index.js in our store directory and use it in new Stroe as follows

Here we can use the createPersistedState method we introduced in plugins. The direct introduction method is that all our states are persisted. Of course, we can also modify the configuration and put a state we want to persist for persistence. I haven't written the specific configuration here. You can refer to the official configuration of vuex-persistedstate.

vuex-persistedstate's Github address: github.com/robinvdvleu…

Summarize

Here I only briefly introduce the use of vuex. For more specific usage, please refer to the official website. Vuex does make it easy for us to manage some global states, such as user information and routes stored when dynamically loading routes. When it is used in a small project, it may increase our complexity, so when considering the early stage of the project, try to plan our project directory structure and data structure, which is very important for us to quickly develop and maintain a project.

This is the end of this article about how to configure Vue-cli to use Vuex. For more information about how to configure Vue-cli to use Vuex, please search for previous articles on 123WORDPRESS.COM or continue to browse the following related articles. I hope you will support 123WORDPRESS.COM in the future!