Vuex

What is Vuex

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

Why use Vuex

If a project frequently uses relationships between components to modify values in data. Once the project is large, managing this data can be tricky.

For this purpose, the Vue official website provides a management tool for these values that need to be frequently modified and monitored for change, namely Vuex

How to use Vuex

The core concept

Each VUex is a Store object, and each object has the following five core concepts

• The state to defineShared data source
• mutations:The onlycansynchronousModify the data operator of the shared data source
• Actions: Can operate asynchronously, but cannot modify the state data source directlyCommit to mutations
• Getters: vuexCalculate attribute, when the data depends on one or more data in the state calculation, can be defined here
• Modules: to make the code clearer and easier to maintain

use

Two ways to use

• state

  Direct use of

  this.$store.state.stateCopy the code

  The map using the

  import { mapState } from 'vuex'
  export default {
    computed: {
      // Use the template with instructions and interpolation. mapState(['Attribute name in state'])}}Copy the code

• mutations

  Direct use of

  this.$store.commit('Function names for mutaitions', the parameters required by the function)Copy the code

  The map using the

  import { mapMutations } from 'vuex'
  export default {
      methods: {
          ...mapMutations([Name of the function on mutations.])
          Mutations are used to modify the data in state
          addFn(){
      		// This. Mutations}}}Copy the code

• actions

  Direct use of

  this.$store.dispatch('Name of function in actions', the parameters required by the function)Copy the code

  The map using the

  import { mapActions } from 'vuex'
  export default {
      methods: {
          ...mapActions(['Actions function name'])
          asyncSubFn(){
      		// this. Actions Specifies the name of the function}}}Copy the code

• getters

  Direct use of

  thisThe name of. $store. Getters. GettersCopy the code

  The map using the

  import { mapGetters } from 'vuex'
  export default {
      computed: {
          // Use the template with instructions and interpolation. mapGetters(['Name of getters'])}}Copy the code

• modules

  Points module

  const store = new Vuex.Store({
      modules: {
          state(){},
          mutations: {},actions: {},getters: {},/ /... You can continue to module here}})Copy the code

  The impact on the value

  The value of state is affected, but other parameters are not affected

  Whether you use it directly or as a mapping, you need to include the module name

conclusion

• State and getters are data sources that are mapped to the component’s computed nodes and used as computing properties
• Mutations and Actions both operate the data, map to the methods nodes of the components, and are used as functions