Vuex Simple Introduction

What is Vuex

In Vue, the development of multi-component has brought us a lot of convenience, but at the same time, when the project size becomes larger, data communication and state management between multiple components becomes difficult to maintain. And the Vuex was born in this. The state management is carried out alone, the application of a unified approach to processing, in the latter part of the maintenance process of data modification and maintenance becomes simple and clear. Vuex manages data in a way that is similar to the one-way data flow of redux. The user interface is responsible for triggering the action (action), which in turn changes the corresponding state, which is reflected on the view. As shown in the following illustration:
Vuex-flow.png using Vuex

Installation:

NPM Install--save Vuex

Introduced:

Import Vuex from ' Vuex '
import Vue from ' Vue '

vue.use (Vuex)

components of the Vuex

The application structure of the complete application Vuex development should be this:
Vuex-complete.png

The following section describes the core of the comparison. State

The state is responsible for storing the status data for the entire application, and it is generally necessary to inject the store object with the node at the time of use, and this can be used later. $store. State Direct Fetch Status

Store to instantiate the generated
import store from './store '

new Vue ({
  el: ' #app ',
  store, render:h +
  h (APP)
})

This store can be understood as a container that contains the state of the application and so on. The process of instantiating the build store is:

Const mutations = {...};
Const actions = {...};
Const STATE = {...};

Vuex.store ({State
  ,
  actions,
  mutation
});

Subsequent use of the component in the process, if you want to get the corresponding state you can directly use the this. $store, or, of course, you can also use the Mapstate helper function provided by Vuex to map states to the computed properties, such as

I am the component
Import {mapstate} from ' Vuex '

export default {
  computed:mapstate ({
    count:state = State.count
  })
}

This can be used directly in the component. Mutations

The Chinese meaning of mutations is "change", which can be used to change the state, which is essentially the function used to process the data, which receives the unique parameter value of the states. Store.commit (Mutationname) is a method used to trigger a mutation. It is important to remember that the defined mutation must be a synchronous function, otherwise the data in the Devtool will be problematic, making the state changes difficult to track.

Const MUTATIONS = {
  Mutationname (state) {
    //change data in state in this case
  }
}

Triggering in the component:

I am a component
export default {
  methods: {
    Handleclick () {this
      . $store. Commit (' Mutationname ')
    }
  }
}

Or use the helper function mapmutations directly to map the trigger function onto the methods so that it can be used directly on the element event bindings. Such as:

Import {mapmutations} from ' Vuex '

//I am a component
export default {
  methods:mapmutations ([
    ' Mutationname '
  ])
}

Actions

Actions can also be used to change states, but by triggering mutation, it is important to include asynchronous operations. Its auxiliary function is mapactions similar to mapmutations and is also bound to the methods of the component. If you choose to trigger directly, use this. $store. Dispatch (ActionName) method.

Define actions for
const actions = {
  ActionName ({commit}) {
    //dosomething
    commit (' Mutationname ')
  }
}

Using in Components

Import {mapactions} from ' Vuex '

//I am a component
export default {
  methods:mapactions ([
    ' ActionName ',
  ] )
}

Getters

Some states need to be processed two times, you can use getters. Through this. $store. Getters.valuename access to the derived state. or directly use the helper function mapgetters to map it to the local computed property.

Const GETTERS = {
  strlength:state = state.aString.length
}
//The above code derives a strlength state based on the astring state

Using in Components

Import {mapgetters} from ' Vuex '

//I am a component
export default {
  computed:mapgetters ([
    ' Strlength '
  ])
}

Plugins

A plugin is a hook function that is introduced when the store is initialized. The more commonly used is the built-in logger plug-in, which is used as debugging.

Import Createlogger from ' Vuex/dist/logger '
const store = Vuex.store ({
  ...
  Plugins: [Createlogger ()]
})

Finally, there are some high-level usages, such as strict mode, which may not be used very often in tests. Check the official documentation when you need it. Overall, Vuex is relatively simple, especially if you have learned flux,redux and so on before, it is easier to get started. Reference Documents

Http://vuex.vuejs.org/zh-cn/index.html