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

This article mainly introduces the relevant knowledge of how to build the Vuex environment, the content is detailed and easy to understand, the operation is simple and fast, and has a certain reference value. I believe you will gain something after reading this article on how to build the Vuex environment. Let's take a look at it.

1. Concept

Vuex is a state management model developed specifically for vue.js applications. In a large project, it is convenient to centrally manage and maintain the values in data that are frequently transmitted between components, and it is also a way of communication between components, which is suitable for communication between arbitrary components.

two。 Work flow

Note: if there is no network request or other business logic, the component can also cross the actions, that is, do not write dispatch, directly commit

3. Installation

Npm i vuex / / installation

4. Build Vuex environment

Pass in the store configuration item when creating the Vue in the main.js file

Import Vue from 'vue'

Import App from'. / App.vue'

Import store from'. / store'

New Vue ({

El:'app'

Render: h = > h (App)

Store

})

Create a store/index.js file

Import Vue from 'vue'

Import Vuex from 'vuex' / / introduction

Vue.use (Vuex) / / use plug-ins

/ / create the core store in Vuex

Const action = {} / / used to respond to actions in the component

Const mutations = {} / / used to manipulate data

Const state = {} / / for storing data

Const getters = {} / / can be thought of as a computational attribute of store to process the data in state

/ / create and expose store

Export default new Vuex.Store ({

Action

Mutations

State

Getters

})

5. Basic use

Import Vue from 'vue'

Import Vuex from 'vuex' / / introduction

Vue.use (Vuex) / / use plug-ins

/ / create the core store in Vuex

Const action = {

ShowName (context,value) {

The context of context.commit ('SHOWNAME',value) / / context contains store

}

}

/ *

Context: {

State, which is equivalent to store.$state and local if it is in the module

RootState, equivalent to store.$state, exists only in the module

Commit, equivalent to store.$commit

Dispatch, equivalent to store.$dispatch

Getters is equivalent to store.$getters.

}

Context.commit is used in regular writing calls, but it is more likely to use es6 variables to deconstruct the assignment, that is, directly in the parameter

The location writes the attributes you want, such as: {commit}.

, /

Const mutations = {

SHOWNAME (state,value) {

State.name = value / / change name in store to hello

}

}

Const state = {

Name: 'hello Vuex'

Age: 25

}

Const getters = {

UpName (state) {

Return state.name = 'HELLO VUEX'

}

}

/ / create and expose store

Export default new Vuex.Store ({

Action

Mutations

State

Getters

})

Using Vuex in components

In the view (template), use $store.state.name / this.$store.getters.upName

In the script, use this.$store.state.name / this.$store.getters.upName

Call action with this.$store.dispatch ('showName','hello')

You can also call mutation directly with this.$store.commit ('SHOWNAME','hello').

6. With the help of map

6.1 mapState and mapGetters

Import {mapState,mapGetters} from 'vuex'

Export default {

Data () {return {}}

Computed: {

/ / generate calculation attributes and read data from state with the help of mapState

... mapState ({mingzi:'name',nianling:'age'}) / / object writing

/ *

Mingzi () {return this.$store.state.name}

Nianling () {return this.$store.state.name}

, /

MapState (['name','age']) / / Array Writing

/ *

Name () {return this.$store.state.name}

Age () {return this.$store.state.name}

, /

/ / generate calculation attributes and read data from getters with the help of mapGetters

... mapGetters ({upName:'upName'}) / / object writing

MapGetters (['upName']) / / Array Writing

/ *

UpName () {return this.$store.getters.upName}

, /

}

}

6.2 mapActions and mapMutations

Import {mapActions,mapMutations} from 'vuex'

Export default {

Data () {return {}}

Methods: {

/ / generate actions method with the help of mapActions, that is, a function containing this.$store.dispatch (xxx)

... mapActions ({showName:'showName'}) / / object writing

MapActions (['showName']) / / Array Writing

/ / generate mutations method with the help of mapMutations, that is, a function containing this.$store.commit (xxx)

... mapMutations ({showName:'SHOWNAME'}) / / object writing

MapMutations (['SHOWNAME']) / / Array Writing

}

}

Note: when using mapActions and mapMutations, if you need to pass parameters, pass parameters when binding events in the template, otherwise the parameters are event objects.

7. Modularization

Some rules:

The state of the application level should be centralized into a single store object.

Committing the mutation is the only way to change the state, and the process is synchronous.

Asynchronous logic should be encapsulated in action.

├── index.html

├── main.js

├── api

│ └──... # extract the API request

├── components

│ ├── App.vue

│ └──...

└── store

├── index.js # where we assemble modules and export store

├── actions.js # action at the root level

├── mutations.js # mutation at the root level

└── modules

├── cart.js # Shopping cart Module

└── products.js # product module

This is the end of the article on "how to build a Vuex environment". Thank you for reading! I believe you all have a certain understanding of "how to build a Vuex environment". If you want to learn more, you are welcome to follow the industry information channel.

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.