A Vuer.

Procedure for configuring Vuex

1. Use of new projects

When creating a project in configuration VUE-CLI, you can directly select the VUex item so that no configuration is required

2. Use of old projects

2.1 installation

Go to the project directory and install NPM install vuex

2.2 configuration

(1). Create vuex.store instance

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex) // Use as a plug-in

const store = new Vuex.Store({
  state: {
    count: 0}})export default store
Copy the code

(2). Inject store into Vue instance

import store from './store' 

new Vue({
  store // Inject Vue instance
})
Copy the code

1.3 Using Stores in components

this.$store.state

Three. Vuex five core

1. State (Save data)

1.1 Defining Data

new Vuex.store({
  state: {
    // Attribute name: attribute value
    name: 'tom'.skills: ['trill'.'B stand'.'Meituan']}})Copy the code

1.2 Usage Data

(1) In the component

this.$store.state.name

(2) In the template

{{$store.state.skills[0]}}

1.3 summary

(1) State is reactive

(2) Once defined, it can be used in any component

2. mutations

2.1 registered

new Vue.store({
  // provide methods to modify data
  // Data should not be modified directly within the component, but must be modified by calling mutations within the componentMutations: {// Define a mutation to change the data stored in state to the specified valueMutation name:function(The state, the load) {},// If the data is complex, put it in the object to passMutation name:function(State, {load}) {}}})Copy the code

Each item is a function that can declare two parameters:

  • The first parameter is required and represents the current state,
  • The second argument is optional and represents the payload (the data to be passed in when the function is executed)

2.2 submit

This. codestore.com MIT ('mutation name ', payload)

3. Getters (Store calculation attribute)

3.1 role

Getters is a new state derived from state in the store and is used to derive new items from existing functional items

3.2 define

new Vuex.store({
  gettersThe name of the getter:function(state) {
      returnValue to return}}})Copy the code

3.3 the use of

$store. Getters. Getter

4. Actions (asynchronous request)

4.1 role

We can modify state using Action, which is similar to mutation, except that:

  • Instead of changing the state directly, you can change the state in the action by calling mutation.
  • An action can contain any asynchronous (such as an Ajax request) action

4.2 define

new Vuex.store({
  // omit other...
  actions: {
    // The context object is passed in automatically and has the same methods and objects as the Store exampleAction name:function(The context, the load) {
      // 1. Send an asynchronous request for data
      // 2. commit calls mutation to modify/save the data
      // context.com MIT ('mutation name ', payload)}}})Copy the code

4.3 call

This.$store.dispatch(' Name of actions ', parameter)

4.4 summary

Putting Ajax requests in actions has two benefits:

  • The code is further encapsulated. Bind sending Ajax and saving data to VUex together.
  • Logic is smoother. If data needs to be stored in Vuex’s state, the action to retrieve data from the interface is defined in Vuex’s Actions.

5. Modules

5.1 format

export default new Vuex.Store({
  state: {},
  getters: {},
  mutations: {},
  actions: {},
  modules: {Module name: {// If this is true, the module name must be added whenever you use mutations
      	namespaced: true.state: {},
  		getters: {},
  		mutations: {},
  		actions: {},
  		modules: {}}}})Copy the code

5.2 Using the split module

(1)state

{{$store.state. Module name. Data item name}}

(2)getters

{{$store. Getters [' module name /getters name ']}}

(3)mutations/actions

Namespaced to true

$store.commit('模块名/mutations名')

Namespaced to false

MIT $store.com (' mutations name)

5.3 Structural Optimization

Vuex- Auxiliary function mapState to use public data

format

// 1. Import the helper function mapState, which is a utility function defined in vuex.
Import {mapState} from 'vuex'
import { mapState } from 'vuex'

computed: {
   / /... Object, expand object, merge computed
   // [' item 1', 'item 2']. mapState(['books'])}Copy the code

The sample

/ / steps
// 1. Import the helper function mapState, which is a utility function defined in vuex.
Import {mapState} from 'vuex'
import { mapState } from 'vuex'

// 2. In computed... mapState(['books'])
// const res = mapState(['books'])
{books: function() {}}
// console.log('mapState', res)

export default {
  computed: {
    c1 () {
      return 'c1'
    },
    // books: function() {}
    / /.. Res: Merge the res object into a computed object
    / /... res. mapState(['books'])
  }
}
</script>
Copy the code

Vuex-map function usage summary

Using global state

Direct use of

this.$store.state

Map auxiliary function

computed: { ... mapState(['xxx']), 
  ...mapState({'New name': 'xxx'})}Copy the code

Use state in modules

Direct use of

This.$store.state. Module name. XXX

Map auxiliary function

computed: { ... mapState('Module name'['xxx']), 
  ...mapState('Module name', {'New name': 'xxx'})}Copy the code

Use global getters

Direct use of

this.$store.getters.xxx

Map auxiliary function

computed: { ... mapGetters(['xxx']), 
  ...mapGetters({'New name': 'xxx'})}Copy the code

Use getters in Modules

Direct use of

This.$store.getters. Module name. XXX

Map auxiliary function

computed: { ... mapGetters('Module name'['xxx']), 
  ...mapGetters('Module name', {'New name': 'xxx'})}Copy the code

Use global mutations

Direct use of

This. codestore.com MIT ('mutation name ', parameter)

Map auxiliary function

methods: { ... mapMutations(['mutation of']), 
  ...mapMutations({'New name': 'mutation of'})}Copy the code

Mutations (namespaced: True) in Modules

Direct use of

This. codestore.com MIT (' module name /mutation name ', parameter)

Map auxiliary function

methods: { ... mapMutations('Module name'['xxx']), 
  ...mapMutations('Module name', {'New name': 'xxx'})}Copy the code

Use global Actions

Direct use of

This.$store.dispatch(' Action name ', parameter)

Map auxiliary function

methods: { ... mapActions(['mutation of']), 
  ...mapActions({'New name': 'mutation of'})}Copy the code

Use actions in Modules (namespaced: True)

Direct use of

This.$store.dispatch(' module name /action name ', parameter)

Map auxiliary function

methods: { ... mapActions('Module name'['xxx']), 
  ...mapActions('Module name', {'New name': 'xxx'})}Copy the code

summary